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Fire up your CSS 


emember CSS back in the old days? 
Probably not, but it has come a long 
way and is a lot more powerful. 
Technologies and libraries that used to 
be outside helpers are slowly being 
merged into CSS as formal standards. 
Just think CSS Grid: how far away is 
that from using tables for layouts? 
In our lead feature this issue we take a look at the 
latest, greatest and, more importantly, the most 
useful updates to CSS. Alongside CSS Grid, we 
take a closer look at @supports (AKA feature 
queries); how to apply CSS Filters; what you can 
do with CSS Variables; some lesser-known 
background-repeat properties; aspect ratio media 


queries; how to use blend mode; how to apply object+fit 
to images; and, to finish, we look at five upcoming 
additions to the specification that deserve your attention. 

What else do we have this issue? What are the best 
tools and techniques to streamline your design workflow? 
We show you how to go from wireframes right through 
to the development handover using Sketch and Zeplin. 

Elsewhere we look at the cognitive chatbot revolution 
that is happening and why developers need to embrace 
chatbot tools. We also get answers to what accessibility 
issues could arise, and what the future may hold for 
conversational Al. And there’s more: get the third part of 
our Getting started with Three js series; how to build a 
real-time feedback app with React; how to deploy to 
Google Cloud; and much more. Enjoy. 
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Get started with Three.js 
The latest in the series demonstrates how to light a 
scene and introduce beautiful shadows 


Convert from Flash to HTML5 
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with real-time messaging 


Deploy your SPA to Google Cloud 
Set up a simple Node.js server and deploy an app to 
Google App Engine or Firebase Hosting 


34 14 
ProFile: Experience UX Lightbox: Alessi 


A deep understanding of the user Virtual fragrances you can almost smell 


contents 7 


News 


CONTACT US AT: webdesigner@futurenet.com | @WebDesignerMag 


Header 


The tools, trends and news to 
inspire your web projects 


What’s the world’s 
number-one browser? 


No surprises, its Google Chrome. Yet its not as dominant as you 
might expect as Web Designer discovers 


rowsers are a key 
component of the web 
experience and they are 

333 slowly supporting more and 
more technologies. Ihe future is bright for 
designers and developers, but as we all 
know different browsers offer different 
Support. One day, maybe, browsers will all 
be equal and designers and developers 
wont have to worry about who supports 
What. We live in hope. 

Every so often Web Designer likes to 
look at how the browser market is evolving 
and what it might tell us. There may be no 
Surprises in what takes top spot in the 
browser market. Yes, it’s Google Chrome. 
Worldwide and across all platforms it has a 
58.94 percent market share (as of June 
2018), a rise of around five percent since 
last year. If we dig down into the figures we 
can see where Chrome is winning. It’s 
worldwide share on mobile has seen a rise 
from 49 percent to 54 percent and its 
dominance on desktop continues with a 


Slightly smaller rise of three percent, going 


from 63 percent to 66 percent. But it’s not a 


winner everywhere. Which device has a big 
winner? Tablet. Here, Safari is the browser 
of choice with 60 percent compared to 
Chrome, which has nearly 25 percent. 
Android has half of Chrome at 12 percent. 
Back to all devices and what happens 
when we shift to different locations? Let's 


percent market share but Safari is a 
relatively close second with 28 percent 
Share. Swap to desktop only and the gap 
widens to 52 percent. But switch to mobile 
and the two are almost even with Google 
nudging ahead by just under one percent. 
Switch to tablet and Safari is miles in front 
with 68 percent compared to Chrome's 17 
percent. Think this might be something to 


66 Switch to tablet and Safari is 
miles in front with 68 percent 99 


start with Europe. Again Chrome is out in 


front with nearly 59 percent market share, a 


rise of over six percent on the previous 
year. So where's Firefox? Second spot goes 


to Safari with just over 15 percent, down one 


percent on the previous year. Firefox 
doesnt even reach ten percent with 9.6 
percent market share, a decline of nearly 
two percent. Heading to North America 
Chrome is once again out in front with a 52 
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do with Apple. Over to Asia and Chrome is 
the market leader with 58 percent, but the 
popular UC Browser comes in second with 
16 percent. This is followed by Safari and 
Opera with 796 percent and 4.27 percent 
respectively. Over to Africa and it is Chrome 
again with 57 percent, but Opera slots into 
second with 15 percent, which suggests 
that low-cost, low-powered mobiles are a 
big part of the internet economy. 
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How does mobile’s 
market share compare 
with desktop? 


Worldwide 


5252” 


Mobile is nearly nine 
percent ahead of desktop 
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Here desktop is king at 
18 percent ahead 


North 
America y 


5148” 


Mobile is closing - it’s 
only ten percent behind 


Africa / 
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O 
Mobile is miles ahead by 27 percent 


Mobile is a whopping 
35 percent ahead 


Source: gs.statcountercom 
(correct as of June 2018) 
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The ways we express ourselves are influenced by the things 
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WORL 


we believe are important - our values. But what do your 
values look like? 


Take 2 minutes to answer some simple questions, find out 
whether you're an Explorer, Innovator, Guardian or 
Custodian then share & compare your results. 


#MyTomorrow 


01. Global Values 
bit.ly/2IZtU96 

You will love this constantly repeating 
and evolving virtual flower animation. 


02.DAD 

http://dad.agency 

Great name and some smart scrolling 
effects grab the users attention. 


0O3.Supremo 
supremo.co.uk 

Smart animations and cute dynamic 
transitions make you want more. 


04. What is Data Science? 
bit.ly/2KAtbdk 

Gorgeous presentation and engaging 
animation tease the viewer. 


Graphics Colour picker Typesetter WordPress 
Look looks Little Did IKnow Walbaum Ayojok 
bit.ly/2IU8DgW bit.ly/2u8n2tz bit.ly/2IYsWd4 bit.ly/2KUc8Pe 


Very distinctive style and colour from the 


A huge family of fonts to choose from, with Fancy starting your own conference? This 
———_—EE a host of stylish styles and weights. theme will give you the ideal starting point. 
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Layoutit ae 


layoutit.com/grid 


aa 
Accessibility 


As we all know, grids are very much the cooossme, QOCOSRRRSNEMNCLER saves ae eae 

basis of any good page layout and CSS Seu Uevawe vsouswesun a 

Grid has given designers and developers : 

plenty of power. But if youdon’twantto | Variable Fonts Essential Image Optimization | Accessibility 

take the time out to learn CSS Grid, or v-fonts.com images.guide bit.ly/2BxyhPr 

just need something fast, then this toolis | Wantto try outa variable font and see Image optimisation is an often forgotten, | Accessibility needs to be a key 

a great choice. Add your columns/grids, what it has to offer? Then this simple but essential art. This extensive e-book component of any design. This official 
name the different components of the slider-powered font resource is just tells you pretty much everything that document goes into detail about how it 
layout and then grab the code. what you need. you need to know. can be applied when using React. 


TOP 5 Web conferences - September 2018 


Get yourself a seat at the biggest and best conferences coming your way soon 


generate 
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Create, Share & , 
Think Differently 


Reasons.to ih 
Brighton UK 
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O97TRZ1.2018 


ciao 
Reasons to: 


Reasons.to The UX Circles Generate Web Audio 


reasons.to Conference Conference generateconf.com Conference 

A conference for multi- theuxconf.com circlesconference.com The conference for web webaudioconf.com 
disciplined digital creatives The theme of this conference Circles is a three-day conference | designers is back with a stellar Dedicated to technologies 
who draw their inspiration from is collaboration between that provides an engaging space | line-up of speakers and including Web Audio API, Web 
many different influences. designers and researchers. to learn from industry leaders. must-learn workshops. MIDI and Web RTC/ WebGL. 


10 resources 


Header 
Comment 


Voice assistants: 


approach with caution 


Voice assistants are here to stay, but now are consumers engaging with brands? 


he latest figures from YouGov claim one in ten Brits now own at least one voice 

assistant and it’s a trend that is continuing to rise as consumers look at more 

ways to make use of these handy devices in their day-to-day lives. 

But a new survey of 1000+ British consumers who currently own a voice 

assistant has revealed that what people are actually searching for, and using the likes 
of Alexa for, is still quite limited. Unsurprisingly, the most popular use was to play music or the radio 
(65 per cent) and half of owners use them for news and weather reports. Other common uses 
include travel updates (16.2 per cent) and playing audiobooks/podcasts (8.2 per cent). Interestingly, 
only seven per cent of users have ever bought anything via their smart speaker. When asked what 
they wish their home assistant could help them with, one in five Brits said they’d like their voice 
assistant to make them funnier and more attractive! 21 per cent want help with joke-telling, and 
almost ten per cent would like their voice assistant to help them with their flirting and dating skills. 12 
per cent of parents also want their smart speakers to distract their children! 

Looking at combined results, most smartspeaker users really want Alexa to act as their PA to help 
with day-to-day chores such as passing on messages, calendar reminders for major events, booking 
tickets, menu planning and paying bills. The survey also looked at where in the home virtual assistant 
usage is most prevalent. The lounge came in at number one (almost 60 per cent), followed by the 
kitchen (38 per cent), and then the bedroom (26 per cent). And almost one in ten have had a chat 
with their virtual assistant in the bathroom! Despite 40 per cent of consumers using their smart 
speaker daily, and a further 40 per cent at least once a week, 60 per cent said what puts them off 
using it more (or having additional conversations with their voice devices) is that it often doesn't 
understand them, gives wrong answers, doesn't do what they need it to do, or it bores them. 

So how can brands and businesses encourage consumers to engage with them via these 
increasingly popular devices? To a certain extent, voice technology is in the same sort of Space as 
the app store was ten years ago. It’s all a bit Wild West. There's lots of gaming going on and 
experimentation. Code Computerlove'’s The Higher Lower Game, which is an App Store-topping 
game based on Google search data, is one such experimentation — developed using an Alexa Skill to 
help the team explore Voice Ul. Developing The Higher Lower Game provided some useful insights 


Louis Georgiou into the challenges of moving into this space. 


Managing Director at Code Computerlove One area that is gathering pace is linking smart speakers with home automation systems. Alexa 
codecomputerlove.com and Google Home can be used to control home heating, lighting and security technology; even 


window blinds fitted with a motorised operating system can be raised and lowered using voice 
ss technology. As voice assistant usage continues to rise, brands will need to look at their voice 
strategies and design digital experiences that are created to not only be found using this technology, 
but that are worth engaging with. 
But approach with caution. As soon as a brand new shiny piece of tech comes along, lots of 


* Voice technology 1S companies cant resist the urge to ‘want one of those. It doesn't matter if they need it or not — it's 
in the Same Sort Of corporate FOMO. 


So prior to investing hundreds of pounds in developing for voice technology, it is important to 


SDPaCe aS the ADD store check that the technology is there to achieve what youre trying to deliver to the business. 


Role-playing and mapping out the potential UX — using the tried-and-tested Postits on the wall 


3 
VAY, aS ten Yeas AZO It S technique — can quickly identify that the end product is achievable with the current technology and 
: ; will actually provide a return on investment. 
all ad bit V y ild V y est 99 Dont get carried away with the idea of creating a conversation — a bit of playfulness can work, 


but remember this is still a simple command/response tool right now. Think about the space your 
user will be in and the task youre helping them accomplish — is voice genuinely a better way of 
them getting the job done than typing, swiping or clicking? If you're building an Alexa Skill, there’s 
nowhere better to start than Amazon's own guide (amzn.to/2AcVIPo). 
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Discover the must-try resources that 
Will make your site a better place 


HTMLS MOBILE FEATURE CHECKER 


Are those cool new APIs you read about safe to use in the real world? Find out here. 


VY SAFE 


CANVAS API 
2D Drawing API 
Score: 99/1C OT 


Which browsers supp¢ 


VIEWPORT DEFINITION 
Meta tag support. 
Score: 98/10C W/hich browsers 


Support this? 


CSS3 BASICS 

opacity, backgrounds, text effects, rounded 
corners 
Score: 96/10C 


Mobile Feature 


Which browse 


5 support this? 


Tested on real devices. 


x UNSUPPORTED 


SERVER-SENT EVENTS 


EventSource pattern to mantain the connection to 


the server open 
Score: 59/10¢ 


FULLSCREEN API 


fnimh Areavrcerc crinnn =*) 
Whicn Drowsers support tnis 


Allow the application to get a full screen mode 


Score: 57/10C 


MEDIA CAPTURE 


Which browsers support this? 


Taking pictures, record video and audio from an 


input file type 


A Declarative 3D Globe Data 


A “® Visualization Library built with 


bit.ly/2IYUCaV 

Which of the hottest new APIs works on == 
the small screen? Does the API you want | Gio.js 

to use have support across mobile giojs.org 


browsers? This simple site is split into 
two: Safe and Unsupported. Find the API 
you want to use and click ‘Which 


browsers support this?’ for more info. rich 3D results. 


Gio.js is a declarative 3D Globe data 
visualisation library built with Three.js. 
It’s simple to use with fully interactive, 


Selection. j-« 


Click te select the boxe! 
Click aad hold te make « multi-selection! 
Poth o to make multiple sslections. 


Selection.js 
bit.ly/2IV9xd3 

A simple, lightweight library to realise 
visual DOM Selections. Supports any CSS 
library. Plus it has support for Node.js 
and touchscreen devices. 


TOP 5 WordPress themes 


Need to get a good-looking website up and running quickly? Try one of these themes 


NORD 


Let's make magic. 


Watsonia 
bit.ly/2KO4FEl 

A simple, but stylish, lifestyle 
theme with a large header and 
a focus on bold imagery and 
smart typography. 


Nord 


nord.fwp.fastwp.net 

A clean, minimalistic theme that 
offers a touch of sophistication 
and breathing space to show off 
any work or projects. 
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Gretna. 


Improve & 


] . boost your traffic 
wl 0 eh is ‘ $29 ae with score 
Residents Seem toF yA 
Found the Key to Ha:_...~~ g 


Gretna 


bit.ly/2KzpwfD 


Magazilla 

bit.ly/21YSvnl 

A news magazine-style theme 
with a big hero image/story to 
grab users’ attention. Plus neat 
grids to offer plenty more stories. 


A simple, blog-style theme, 
which combines big colourful 
sections with neat typography 
and different image styling. 


Angular Augury 


+ Gebvgong Anquar ? applicators 


What is Augury 


Angular Augury 
augury.angular.io 

In a nutshell, Angular Augury is a Google 
Chrome Dev Tools extension for 
debugging Angular 2 applications. Gives 
insights into app structure and more. 


qo 2 
, Don't Do Fashion 
Be Fashion 


Prequelle 
bit.ly/2IZ70gE 

An eCommerce theme witha 
nod to fashion. With plenty of 
white space and a strong focus 
on the product. 
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lightbox 


Designers: 
Triboo http://triboo.com 
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66 This 
engaging, 
360-degree 
interactive 
experience 
uses WebGL 
technologies 
to digitally 
reimagine 
Alessi's 
fragrances 
collaboration 
with Marcel 
Wanders 99 


Colours 


#1E1945 #/P 20D) 
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Tools 


Threejs, GLSL Shaders, 
Vue js, C553 


Fonts 


abcABC 
1234567890 


Gotham, by Tobias 
FrereJones and published 
by Hoefler & Co, is used 
exclusively in Book variety 
to style all site text. 
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Select each fragrance droplet from the main menu and unleash a sense of each scent by manipulating the virtual flowers 
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Designed for consistency across desktop, tablet and mobile 
platforms, the various WebGL interactions react accordingly to 
touch and gyroscopics 
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The audacious front-end experience is backed by Alessi 
shop links for discovering further details and purchasing 
products in the range 
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Create an animated mouse 
hover text ripple effect 


Use this animated ripple effect as a fancy design element to indicate interactivity 


1. Document initiation 


Initiate the webpage with the HTML document definition. 


This consists of the HTML document container, which 
stores the head and body sections. While the head 
section is used to load the external CSS and JavaScript 
resources, the body is used in step 2 for the visible page 
content elements. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Ripple Effect</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The webpage content consists of the text element that 
the ripple effect is to be applied to. This example uses 
article containers, but any element type can be used as 
long as the ripple class is applied. This class will be used 
by JavaScript and CSS to apply the effect. 
<article class="ripple”> 
Some text goes here... 
</article> 
<article class="ripple”> 
Another text goes here... 
</article> 


3. Text manipulation 
Create a new file called ‘code js. The code in this file waits 
for page loading to complete, upon which filing all 
containers using the ‘ripple’ class. This step changes 
the HTML inside these containers so that each letter 
of the text is wrapped with a ‘span’ element. It’s an 
important feature to allow the individual letters to be 
animated via CSS! 
window. addEventListener("load"”, function() 
{ 
var nodes = document.querySelectorAll1(". 
ripple”); 
for(var i=@; i<nodes.length; i++){ 
var letters = nodes[i].innerText. 
split('').join(’</span><span>') ; 
letters = letters.split(’ '). 
join(’&nbsp;'); 
nodesLi].innerHTML = 


"<span>"+letterst+”</span>" ; 
*kk STEP 4 HERE 
3 

Ds 


4. Animation delay 
The effect requires each letter to have a slightly longer 
animation delay than the previous letter. Instead of 
manually writing this within the CSS, JavaScript is used to 
automatically calculate and apply this style to each letter 
based on their position. The calculation is performed as a 
JOth of each letter’s index position. 
var children = nodes[i].childNodes; 
for(var n=0; n<children.length; n++){ 
children[n].style.animationDelay = 
(n/10)+"s"; 
} 


5. Stylesheet initiation 
Create a new file called ‘styles.css - this is the CSS 
stylesheet. The first style applied is to set the page body 
background to black, with the text aligned centrally. The 
black background is used for this example to allow the 
blur effect to stand out; feel free to change these settings 
for your own project. 
body { 

background: black; 

text-align: center; 

font-size: 


I 


OCs 


6. Default stylings 
This step defines default styling of letters inside the ripple 
container. A clear text shadow is applied - ie zero blur 
and set at the desired white colour. The text colour is set 
to transparent because only the shadow is required for 
display. Items are set to use an ‘inline-block’ display so 
that their text flow can appear as normal text elements. 
ripple > x*{ 

display: inline-block; 

text-shadow: @ @ Q #fff; 

color: 


I 


transparent; 


7. Hover effect 

Each letter inside the ripple container is to have the 
rippleEffect’ animation applied to them - but only when 
the ripple container is hovered by the mouse pointer. The 
animation is applied over a duration of five seconds and 
will repeat infinitely for the duration of the mouse 
hovering over the ripple container. 


.ripple:hover > * { 
animation: rippleEffect 5s infinite; 


I 


8. Ripple effect animation 
The ripple animation is made from three keyframes that 
the browser will manage transitions towards. The first 
occurs at 40 per cent of the way through the animation, 
which sets the individual letters to semi-transparent. The 
second keyframe at 50 per cent through the animation 
moves and resizes the letter element, while setting blurry 
visibility on the text. 
@keyframes rippleEffect { 
40% { 
Opacity: .35; 
J 
50% { 
transform: translate3d(.5em, 0, Q) 
scale(1.1); 
text-shadow: @ Q@ 2@px #fff; 
3 
xkk STEP 8 HERE 


I 


9. Animation finalisation 
The final frame occurs 7/5 per cent through the 
animation. Its purpose is to animate the letters back into 
view. This means moving items back to their original 
position, eliminating the blurriness of the text shadow, 
and returning transparency to full visibility. The remaining 
time after this keyframe is used to pause the visibility of 
the text. 
75% { 
transform: translate3d(@, @, Q) 
scale(1); 
text-shadow: @ @ QO #fff; 
Opacity: 1; 
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Built 
around a 
multiple- 
choice test, 
this distinctive 
site quizzes 
visitors on the 
EU's General 
Data 
Protection 
Regulation 
(GDPR) laws 


Colours 


#FFZAOO #EAZIOO 


#202224 PPEPPEP 


Tools 
SVG, GSAP. PixiJS 


Fonts 
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The Favorit font designed 
by Johannes Breyer and 
Fabian Harb at DINAMO 
Typefaces is used 
predominantly across 
Light, Regular and Bold 
weights. 
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Sharp Grotesk Bold 20 by 
Lucas Sharp makes an 
appearance within the 
GDPR logo and countdown 
sequences. 


COMPANY X HAS AN ANNUAL REVENUE OF €10M. 
WHAT IS THE MAXIMUM FINE THEY COULD 
RECEIVE, FOR NOT BEING GDPR COMPLIANT? 


Above 


£400,000 


£1M 


£20M 


Not afraid of negative white space, the design poses a series of GDPR questions and answers to click through 


FALSE 


Above 
Answers are greeted by a set of amusing True or False screens 
utilising effective nuggets of GSAP animation 
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CONGRATULATIONS 
ON FINISHING THE GDPR 


T 


P Bp GRANDMASTER CHALLENGE! 
a 


GRANDMASTER DON'T KEEP IT ASECRET, SHARE YOUR 
CHALLENGE NEWFOUND GDPR MASTERY WITH THE 
WORLD 


Above 
A big red screen congratulates completion, inviting participants to 
sign up for email scores or share the quiz socially 
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Create an animated sliding 
letter box effect 


Introduce titles and headline text content with an animation effect that draws attention and focus 


1. Page document initiation 
The webpage is defined with HTML, which must define 
the document structure. This consists of the HTML 
container, which stores the head and body sections. 
While the head section is used to load the external CSS 
and JavaScript, the body section is used to store the 
HTML created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<title>Slide Effect</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The page content consists of text containers for 
each group of text that the animation is to be applied to. 
Any element can be used as the container: the 
most important feature is the application of the ‘slide’ 
class. This will be used by JavaScript and CSS to apply 
the effect. 
<article class="slide”> 
Witness 
</article> 
<article class="slide"> 
The Power 
</article> 
<article class="slide”> 
Of this Example... 
</article> 


3. JavaScript manipulation 
Create a new file called ‘code js. The JavaScript must find 
the containers that the ‘slide’ class has been applied to - 
then update their content so that each letter is wrapped 
inside a ‘span’ element. This functionality must be 
executed after the page has loaded - hence the code 
being placed inside a ‘load’ event listener attached to the 
browser window. 

window. addEventListener("load"”, function() 


‘ 


var nodes = document.querySelectorAll1(". 


slide”); 
for(var i=@; i<nodes.length; i++){ 
var letters = nodes[i].innerText. 


split('’').join(’</span><span>’ ) ; 
letters = letters.split(’ '). 
join('&nbsp;'); 
nodesLi].innerHTML = 
"<span>"+letterst+”</span>” ; 
*kk STEP 5 HERE } 
I); 


4. Unique positioning 
Each character inside the container needs to have 
unique styling so that they can move towards their target 
position. They also need to use a ‘z-index’ that positions 
them under the previous letter, which is calculated via the 
JavaScript. This code allows the effect to be applied 
without restriction to the number of characters used. 
var children = nodes[i].childNodes; 
var xX = Q; 
for(var n=0; n<children.length; n++){ 
childrenLn].style.left = x+”px”; 
children[n].style.zIndex = letters. 
length-n; 
x += children[n].offsetWidth; } 


5. CSS initiation 


Create a new file called ‘styles.css. This step initiates the 
CSS stylesheet by defining the page body with a black 
background colour. The containers using the ‘slide’ class 
are also defined with relative positioning so that text 
elements can be positioned in relation to their location. A 
minimum height is applied to avoid obstruction between 
the different containers. 
body { 
background: black; } 
. Slide{ 
display: block; 


position: relative; 
font-size: 3em; 


min-height: 1.5em; } 


6. Slide letters 


Each child inside the slide container is the ‘span’ element 
containing individual letters of the text; created in step 3's 
JavaScript. These elements are positioned in the top-left 
corner of their parent container - defined in step 5. A 
transition is applied to the ‘left’ attribute that will trigger 
an animation when change is applied via the JavaScript 
from step 4. 
Slide > x{ 
position: absolute; 
display: inline-block; 


top: Q; 

left: Q; 

background: red; 

color: #fff; 

border: .1cm solid #000; 
margin: Q; 


transition: left 3s; } 


7. Letter colouring 
A rule is applied using some algebra within the nth-child 
selector so that individual letters can be updated with 
Unique colours. The 3n means select the rule for every 
3rd element, while the +1, +2 and +3 will move the selector 
by 1,2 or 3 elements to the right of the 3rd element. 
.Slide > *:nth-child(3nt+1){ background: 
red; } 
.Slide > *:nth-child(3n+2){ background: 
green; } 
.Slide > *:nth-child(3n+3){ background: 
blue; } 


The Grandmaster 
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Create an animated 
random marker dash effect 


A skill to apply the effect of marker pen dashes to any defined area(s) of webpages 


1. Page initiation 
The first step is to initiate the webpage definition. This is 
made from markup describing the HTML page container. 
There are two sections that the document container 
stores. The head is used to load the JavaScript and CSS, 
while the body section stores visible content that will be 
defined in the following step 

<!DOCTYPE html> 

<html> 

<head> 

<title>Marker Dash</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js"></script> 

</head> 

<body> 

*k* STEP 2 HERE 

</body> 

</html> 


2. Body content 
The body content consists of a container that the effect 
is applied to. This container stores any visible text and 
has the dashEffect' class. It is this class that will be used to 
allow the JavaScript and CSS to find where to apply the 
effect. You can apply the effect to multiple elements by 
applying the ‘dashEffect' class. 

<article class="dashEffect”> 

<h1l>Hello...</h1> 
</article> 


3. Container search 
Create a new file called ‘code js. Page content is only 
available after the page has completed loading, hence 
code must be placed inside an event listener that waits 
for this. The focus of this step is to find all containers 
using the dashEffect' class, upon which the creation of 
the ‘marker effect elements are initiated. This is achieved 
by setting the loop to repeat up to the amount defined 
by the count variable - ie 5. 
window. addEventListener("load"”, function() 
4 
var parents = document. 
querySelectorAll(".dashEffect”) ; 
var count = 5; 
for(var c=0; c<parents.length; c++){ 
var delay = Q; 
for(var i=@; i<count; i++){ 
*kk STEP 4 HERE 
+ 5 
y3 
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4. Marker blocks 


Each consists of the creation of a container element for 
the marker effect - created as a div element. A loop is 
used to define the HTML for five child span elements; 
each having an opacity calculated using their index ‘n’ 
position from the loop. This HTML is applied to the 
parent node, along with the class name ‘dash’ so that the 
parent can be referenced from the CSS. 

var node = document.createElement("div”); 

var html = ""; 

for(var n=0; n<5; nt++){ 

html += "<span style='opacity:”"+(1/ 
(n+1))+"'></span>"; 


J 
node.innerHTML = html; 
node.className = "dash"; 


*** STEP 5 HERE 


5. More dash node styling 
Additional styles are applied to the parent dash node 
These styles position the dash in unique positions and 
rotations, avoiding the need for the CSS or HTML to 
contain bloated markup. A unique animation delay is also 
applied; defined in step 4 and incremented by one 
second at the end of this step. 
node.style.left = Math.floor(Math. 
random()«parentsLc].offsetWidth)+"px”"; 
node.style.top = Math. floor (Math. 
random()xparentsLc].offsetHeight)+”px”; 
node.style.height = parentsLc].childNodes. 
length+”em” ; 
node.style.transform = 
"rotate("+(1*60)+"deg)”; 
node.style.transformOrigin = "50% 0%" 
node.style.animationDelay = delay+’s”; 
parentsLc].appendChild(node) ; 
delayt+; 


6. CSS initiation 


Create a new file called ‘styles.css. This step starts the 
stylesheet by defining the page to have a black content 
and white applied as the default text colour. For this 
examples visibility of the effect, articles are set to cover 
the full screen height. You can set the size of the effect 
containers to any size required by your project. 
body { 
background: black; 
color: #fff; 
, 
article 
min-height: 100vh; } 


7. Dash parents 
Elements within the ‘dashEffect' containers that have the 
dash class are the parents of the visible dash marker 
elements. These need to display with absolute 
positioning so that they appear at the random positions 
defined in step 5b. Every dash parent shares the same 
width and opacity settings - set to invisible by default. 
The ‘dashAppear’ animation is applied to infinitely 
introduce the marker over a duration of five seconds. 
.dashEffect > .dash{ 

position: absolute; 

display: block; 

width: 1.5em; 

Z-index: =1,; 

Opacity: Q; 

overflow: hidden; 

animation: dashAppear 5s infinite; } 


8. Dash children 


The elements placed inside the dash parent are displayed 
with a red background colour and are set to appear at a 
specific height. They are set to display as a block with 
100% width to guarantee that they appear stacked on 
top of each other within their parent dash container. 
.dashEffect > .dash > x{ 

display: block; 

width: 100%; 

height: lem; 

background: red; } 


9. Appearance animation 
This step defines the animation applied to the dash 
parent in step 7 The animation introduces the dash with 
full visibility, but with no height. It is quickly animated to a 
visible height at 10% through the animation. Opacity is 
more slowly animated to invisible at the end of the 
animation. 
@keyframes dashAppear{ 

from{ height: @; opacity: 1; } 

10%{ height: 10em; } 

to{ opacity: Q@; } } 
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CHASING RAINBOWS 


UNIVERSALLY 
SPEAKING 


Perhaps the biggest initial hurdle for Universal 
Love was settling on a visual theme that would 
adequately live up to the vibrant music at the 
project’s heart. An undoubted advantage here, 
however, was the ability to reference the 
album’s already commissioned artwork, with 
the Your Majesty designers able to use itasa 
touchstone for setting their own aesthetic 
aims. “Given the vibrant cover artwork from 
Craig and Karl as inspiration, the possibilities 
for creative expression were endless,” starts 
Senior Producer Michael Hoang. “In order to 
ensure the platform achieves its monumental 
mission, we established an execution strategy 
that aims to balance both communication and 
emotional objectives.” This formulation of an 
‘execution strategy’ would set out some 
rule-based goals for what the visual concept 
for the website should fulfil. Firstly here, the 
team decided that it had to be ‘celebratory’ 

to mark the fact that Universal Love was 
Signposting a momentous time for perceptions 
around love. Secondly, it needed to be ‘loud’ 
enough and confidently bold in terms of 
Supporting a revolution, while thirdly being 
‘exciting’ in the way that love in all its forms is 
fun and sensational. With this framework in 
mind, the team could then undertake a 
conceptual phase during which every member 
sketched out various concepts for bringing the 
Strategy to life. “After a few iterations and 
consolidations of ideas, we decided that a 
natural channel to transmit the music was 
through the album’s artwork, particularly the 
rainbow at its centre, which reflects the colour 
sequence of the LGBTQ pride flag,” explains Art 
Director Sheldon Lotter. “Our aim was to infuse 
feelings of festivity, joy and love into every 
aspect of the website.” 
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Born out of collaboration between MGM 
Resorts — the largest hotel brand in Las Vegas, 
Nevada — and marketing agency McCann New 
York, the concept was to have leading artists 
put a new spin on iconic love songs in the name 
of equality. “Each of the six updated love songs 
gives Same-sex couples a new soundtrack for 
their own love stories and feature pronouns 
changed to reflect the world of LGBTQ 
relationships,” explains Your Majesty, the stellar 
agency commissioned to deliver Universal Love 
online. “McCann New York and MGM Resorts 
partnered with us to design and build a digital 
stage for the Universal Love project.” And so 
they might, with the high-profile design and 
technology firm keeping a client book in 
keeping with the recording stars involved. Your 
Majesty’s award-winning work for the likes of 
Netflix, Samsung, Adidas, BMW, Spotify, Bentley, 
American Express and Red Bull now sits 
side-by-side with a beautiful website featuring 
Bob Dylan, Kesha and St. Vincent. A rainbow- 
themed jukebox with an inspiring message, we 
discover from the folks involved how Universal- 


Love.com received the creative care it deserved. 


UPENDING NORMS 


Universal Love as a broader project really starts 
with MGM Resorts and, of course, its place in 
the global perception of its undisputed home. 
As a hugely successful leisure and events 
presence in Las Vegas, they play a significant 
role in establishing the city as “wedding capital 
of the world” for many. However, for whatever 
reason, this hasn't always necessarily been 

the perception for those in the lesbian, gay, 
bisexual, transsexual or ‘questioning’ 
community. “With a long history of support for 
the LGBTQ community, MGM Resorts was on 

a mission to spread a message of inclusion, 
showing that [Las] Vegas was truly welcoming 
to people of any sexual orientation,” begins 
Senior Producer at Your Majesty, Michael 
Hoang. “In order to spread the message of 
inclusion, MGM Resorts teamed up with 
McCann New York to create an album that 
reimagines classic wedding songs, flipping the 
pronouns to upend norms and challenge 
conventional notions of love songs, which have 
traditionally been written from a heterosexual 
point of view. With the project’s grand purpose, 
the updated but timeless songs, and the cover 
artwork from Craig and Karl, McCann New York 
came to us to build a space to host and amplify 
this revolution.” This potential ‘space’ would, of 


ABOVE 

Get more 
details of an 
artist via 
their bio 


RIGHT 

The user 
experience 
can be 
enjoyed on 
all devices 


course, need to fulfil a dual purpose of putting 
the Universal Love message up front, while 
providing a robust enough platform for serving 
the music appropriately. Songs such as Bob 
Dylan’s “He’s Funny That Way”, “I Need a 
Woman to Love Me” by Kesha and St. Vincent’s 
rendition of “And Then She Kissed Me” say so 
much in themselves, but the challenge was 


presenting the audio in a striking context. 


CIVIL PARTNERSHIP 


The conceptual work to find the best direction 
for the site’s presentation undoubtedly 
demanded close collaboration. This project 
really was about fulfilling the overarching 
partnership between MGM Resorts and 
McCann New York, and the brief the latter had 
for marketing it. “In our case, we primarily 


“MGM RESORTS WAS ON 
A MISSION TO SPREAD A 
MESSAGE OF INCLUSION” 
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1 Need a Woman to Love 


interfaced with McCann New York as the lead 
creative agency of the project,” Hoang 
continues. “At Your Majesty, we are not afraid of 
showing work in progress and prefer to work 
with our partners rather than for our partners. 
As aresult, we and McCann roughly maintained 
a bi-weekly creative check-in process.” While the 
arrangement and scheduling of these kinds of 
meetings might change, it remains a common 
key thread to the most successful work this 
industry produces. In this instance, the Your 
Majesty and McCann guys would view regular 
consultations together as both informal 
brainstorming sessions, and as more structured 
chances to find common ground on the choices 
being made. “We treat these check-ins not as 
review points, but rather opportunities for both 
teams to bounce ideas off of each other and to 
ensure creative and communication alignment 
between what we are designing and building 
with the rest of the campaign’s touchpoints.” 
This strong communication work laid the 
foundations as work moved into a conceptual 
phase and an ‘execution strategy’ for 

realising a design. b> 
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CUVER VERSIUN of subtle effects and transitions. “The graphical 
Such an execution strategy would set out elements of the site inspired lots of playfulness 


certain rules and provide a framework for to be explored, and we wanted to take full 
inspiring visual sketches that referenced the advantage of that without losing typographical 
album’s vibrant cover artwork. Produced by fidelity. With WebGL we can create wildly 
artists and illustrators Craig Redman and Karl visually interesting things, but HTML and CSS 
Maier, otherwise known as Craig & Karl has always been the best when it comes to 
(craigandkarl.com), the cover itself features native scrolling and making things responsive. 
the familiar LGBTQ rainbow motif to arrive at We ended up with a combination, leveraging 


a striking design that Your Majesty wanted to WebGL for the highly interactive parts — such as 
reflect. “The key challenge was then to bring the the elastic rainbow background that bends and 
album cover art to life, making it feel vibrant bounces as you scroll — and HTML with CSS for 
and fun,” confirms Technical Lead, Hugo all the text content and clickable areas.” 

Wiledal. “As with any project, it is really a ae 

dialogue back and forth between design and LOVE SPREADS 

development, where each role can inform and Jumping forwards to the climax of the project’s 


challenge the other, especially when it comes 12-week production time, and the efforts would 
to animation and interactivity. After some initial naturally shift to marketing Universal Love’s 
exploration we landed on the idea of starting Campaign. This phase for the new website 


with the album cover and then taking the user would see things shift back from Your Majesty 


to a zoomed-in view of the rainbow element, an and over to McCann New York, in terms of 
isolated part of the larger artwork. Thanks to directing audiences to the album. In this 
this, we were allowed to bring the shapes to life respect, rather than creating a launch campaign 
without having to worry about the performance consisting of traditional advertising, the songs 
issues that come with rich graphics. The elastic onthe album would become the centrepiece 
motion you scroll really lends a feeling to the of an ecosystem as the music spread to social, 
whole album artwork. We utilized specially digital and retail platforms. The project’s eye 
prepared SVGs containing hidden elements that and ear-catching new website would enjoy an 
we could use for tracking positional datainthe |= important role across all three of course, 
frontend. This allowed designers to influence providing an insightful listening booth for 
code without having to go through developers.” sampling the standout songs. 

Recorded and then launched simultaneously 
CONSTRUCTIVE COUPLING on Universal-Love.com as well as on every 
Given that the Universal Love website would major music streaming platform including 


Support a fairly straightforward function, the Spotify, iTunes, Apple Music and Pandora, the 
team really could allow the frontend work to album generated considerable buzz within 
be the focus. With any heavier backend local, national and international news. “The 
development largely unnecessary, it was also team hooked up with our artists to spread the 
decided that a more streamlined build would message in as many touchpoints as possible. 
enable the performance to pop even during They all — minus Bob Dylan who doesn't use 
times of high demand. “Due to the static nature social media — posted it on their social media 
of the project, and the expectation of high channels at launch. Week two then saw the 
traffic, we opted for a backend-less project release of a music video by Kesha, where she 
structure,” explains Wiledal. “Where a single- marries a lesbian couple at an MGM hotel 
page app was hosted directly on a CDN for in [Las] Vegas. In Week three, we hit late night, 
maximum capacity.” The coding challenges with Benjamin Gibbard performing “And 
would, therefore, revolve much more around | Love Him” on Conan. In Week four, 10,000 
getting the surface technology choices right for vinyl records were sold in stores across the 
achieving the frontend look and feel. Visitors country for Record Store Day. Lastly, She and 
to the final live site will know that Universal Him wrote the first original song inspired by 
Love's striking appearance and purposefully the project and released it in two versions 


colourful theme also incorporates a myriad to celebrate universal love.” 


CHASING RAINBOWS 


SITE HIGHLIGHT 


Art Director on the project Sheldon Lotter gives 
his honest heartfelt reaction to what aspect of the 
experience draws the most universal love from 
the Your Majesty crew 


“With small but thought-through 
interactive details like the ability to 
listen to love itself, an explosion of 
cojour when browsing through the 
rainbow and the hearts bursting 
with elation, Universal-Love.com 
invites all visitors to take part in 
and celebrate this momentous 
moment of love for all” 
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On a mission to transform the experience of digital interface users, Experience UX havea 
deep understanding of how digital environments must speak to their users, offering 
unique experiences that place the user at the centre of every design 
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xperience UX is the 
brainchild of a 
psychologist anda 
project manager. 
Co-founder Damian 
Rees, graduated 
university with a 
degree in Applied Psychology and spent his 
early years working in UX including a stint at 
the BBC and National Air Traffic Control. 

Whilst at the BBC he stepped in for the Head 
of UX becoming the lynchpin co-ordinating all 
user research for the organisation, where he 
had a lightbulb moment. ”! realised that none of 
these high profile UX agencies were asking the 
right questions or delivering any effective 
solutions to the problems they we're 
uncovering in their research,’ Damian explains. 


A 


Who Experience UX 


What Usability Testing, User 
Experience, Interaction Design, 
and User Research 


Where 4th Floor, Avalon, 26-32 Oxford 
Road, Bournemouth, BH8 8EZ 


Web experienceux.co.uk 


Key Clients 
Burberry 
McCarthy & Stone 
The Open University 
The Body Shop 


The Financial Times 


How about we add this here... Laura 


Yarrow (UX Consultant) makes fine 
adjustments to a client briefing board 
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“| knew there was far a better way to design 
great experiences, so | started developing a 
business plan. It wasn’t until my path crossed 
with Ali (Carmichael, co-founder and 
Commercial Director) that the timing felt 
opportune to start a new business.” 

In the meantime, Ali had graduated with a 
degree in Tourism Management but discovered 
that his passion was actually in digital so he 
developed his early career in sales and project 
management at full-service agencies. It was at 
one such agency, with Ali as Head of Project 
Management and Damian as Head of Design, 
that they decided to make the leap into running 
their own business. 

“We were both frequently frustrated that 
projects had key user insights missing from 
them, but were brought to us too far down the 
line to influence. It wasn’t the culture back then 
to put user needs central to the design process 
and it was obvious to me that here was an 
opportunity. Following a team building day we 
went to the pub and, a few whiskies later, 
decided to set up a business that helped 
companies see the world from the perspective 
of their customers first and ultimately, to make 
life easier for people. 

One area that the founders spent a lot of time 
on was deciding on the name of their new 
business, as Damian explains: “It took Ali and | 
ages to agree on an agency name and we 
found it quite a stressful process. Eventually we 
were born as Experience Solutions and then 
later changed to Experience UX, both domains 
(.co.uk) were bought afterwards and neither 
Was available as .com. Clients refer to us as 
Experience so in our next iteration we may 
even drop UX altogether. 

“Deciding on a name can be a difficult 
process but in hindsight it doesn’t have be a 
sticking point to launching a business. There 
are plenty of examples of great agencies with 
ordinary names and just as many with witty 
creative ones, so just pick something unique 
and run with it. Consistency of your identity 
and tone of voice that will help develop your 
brand, and the work that you deliver will 
speak the most. ” 

As user experience developers their own 
website must be a showcase for their latest 
user thinking? “We've always found that our 
website is about 18 months behind our thinking 
because our strategy is constantly evolving,” 
says Damian. “We've recently invested time in 
updating our website but to be honest, it’s in 
constant evolution. 

“Number one, an agency's site should be 
easy to use rather than a ‘bells-and-whistles’ 
example of what is possible in web 
development. We practice what we preach, 
when user research on our site led to a rebrand. 
You can tie yourself up in knots trying tobe [> 
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perfect when our research showed that, in 
reality, an agency website is there for credibility 
and that intangible, but oh-so-important ‘gut 
feeling’ of a visitor about your skills and 
credibility is more vital than an amazing piece 
of animation. We champion the role of the user 
in our approach to all projects, so we’ve worked 
hard to make our site more human. 

“We're also passionate about sharing best 
practice so we publish interviews with world- 
class industry experts such as Jared Spool and 
Caroline Jarrett under our blog UX Insider. 

This alongside various How To Guides means 
we're a useful resource so we get plenty of 
traffic to the site.” 

The approach agencies take acquiring new 
clients can be manifold. For Experience UX they 
have been following a policy that enables them 
to gain not only the clients they want, but also 
to focus their business’s future on a path that 
they have defined. Damian outlines their 
approach: “We are staunch advocates of Blair 
Enns’ The Win Without Pitching Manifesto 
(winwithoutpitching.com/the-manifesto) 
and have a policy of no pitching and no 
working for free. 

“We love talking to new clients about how we 
can help them, but we're not interested in being 
compared with other agencies on price and 
being reduced to procurement checklists. Our 
attitude is very much “let us show you what we 
can do” but we'll only invest in doing that when 
we feel we have good potential for a great 
working relationship. We get a high proportion 
of referrals via word of mouth and even higher 
percentage of work comes from existing clients 
who see the value of our processes and throw 
more of their problems at us.” 

Damian concludes: “In the early years we 
would take on small projects and/or just user 
research to get the foot in the door. What we 
quickly discovered is that companies often 
underestimate the importance of UX or it’s a 
last-minute effort, so they try to rush it through. 
Now, we are much more selective and only get 
involved with clients who match our strong 
values and ethics. Once you have that in place 
it’s amuch more pleasurable experience and 
the effectiveness goes through the roof. Our 
clients these days tend to be large household 
or industry brands, with a passion for user- 
centred design so were already reading off 
the same page.” 

With such a wide remit to improve the user 
experiences across all digital spaces, Damian 
outlines one project that distils their attitude 
to improving how everyone interacts with 
today’s digital services. 

“Our ethos has always been ‘solving real 
problems for real people’. A recent project that 
epitomises that is McCarthy & Stone retirement 
living. They have a mature, under-represented 
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on’t believe that a user journey 
bi - should be looked at from the 
perspective of only one device. 
People interact with technology In 
complex ways with often a series of 
short interactions at different stages 
of their decision-making process. 
These journeys can take place on 


a variety of different devices in 
many different contexts 


Damian Rees, Co-founder, Director 


The Experience UX team 
doing what they do best 
in their shiny new offices 


audience and a customer journey that is 
incredibly emotional,’ says Damian. “We 
discovered so many powerful surprises 
through the user research and it was refreshing 
to have a client that embraced them without 
hesitation. We found that the biggest audience 
was in fact the influencers, namely younger 
family members, and 
that retired people 
don’t want to see 
patronising stock 
images of ‘smiling 

old people’. Their 
customers demanded 
real representation and because the client 
listened, we were able to transform a journey 
that often starts with anxiety and fear into 
excitement and reassurance.” 

As aclient brief can be diverse to say the 
least, Experience UX have developed their 
processes over time to enable them to work 
efficiently. “Every project is different but there 
are usually three core roles with additional 
support bolted on when required,’ Damian 


“Retired people dont 
want to see patronising 
stock images of ‘smiling 
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explains. “It’s no surprise that the Account 
Director manages the relationship with the 
client and keeps us on track with what we are 
trying to achieve. The UX Lead owns the 
project and has the day-to-day communication 
with the client. They research, plan and design 
the project from start to finish, with support 
from a UX Support 
who develops the user 
research plan, facilitates 
any workshops and 
provide sense checking. 
This is a critical role in 
the ideation phases.” 

Turning to the tools Experience UX use 
across their business, UX Consultant Laura 
Yarrow explains: “As we work on such a wide 
range of projects, we prefer to give autonomy 
to the UX Lead to use the tools that make sense 
for the project. Our go-to tools are Axure for 
prototyping, Float for project scheduling, and 
Asana for project and task management. 

“We do a tonne of mind mapping to organise 
our thinking and research findings, and that > 
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All products 


2. Where would you expect to find “Argan Oil Bubble Bath”? 


© Bath & Body Care 


Success 
Fail 


Skip 


@ View the Pietree 


Top This process 
showed Experience 
UX how people tried 
to find products and 
helped them identify 
issues both at the top 
and lower levels 


Middle Experience 
UX’s validation 
test showed their 
new navigation 
structure worked 
much better than 
the existing design 


Right Before and after 
of the navigation. 

The new navigation 
was based on body 
parts and increased 
sales by 28% 
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Beautifying oils 


The Body Shop 


This project was all about The Body 
Shop’s mobile site and how it could 
be improved. The starting point for 
the mobile project was the need for 
The Body Shop to understand their 
customer better, the conversion 
funnels and the pain points. It was 
about understanding the full journey 
and how the ‘why’ complements the 
‘what’ of analytics. What are the 
users’ buying decisions? How can we 
optimise their purchasing journey? 

We ran usability tests on the mobile 
site and worked on the company’s 
navigation redesign project. One 
of the key aims of the navigation 
redesign was to improve the 
taxonomy of the mobile site. 

The research we conducted 
helped highlight which products 
were causing ambiguity, and where 
customers were getting confused 
or lost on their journey. The golden 
nugget was that skincare was nota 
massively searched term in Google 
and that people didn’t seem to 
categorise by skincare — they went 
straight to body part. This was one 
of the key insights we took from the 
project that helped us rethink how 
we structure things. Among the 
biggest changes were rebranding 
‘Skincare’ as ‘Face’ and adding a 
‘Skin Advice’ category. 

After the launch of the new 
navigation, The Body Shop saw 
positive uplifts across all categories. 
The most significant improvements 
were seen in the ‘Face’ category 
(rebranded from skincare) and 
through the introduction of the 
Skin Advice section. Even the early 
Statistics were very positive, with 
year on year orders up by 28%. 
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The Open University 


The Open University recognised that their complaints 
and appeals process was long-winded, confusing, and 
resulted in a high proportion of complaints being 
escalated to official complaints. We were asked to 
conduct a full user review of the complaints and appeals 
process to identify the issues and produce a clear plan 
for how the online system should be redesigned. 

We adopted a user-centred design approach to the 
problem. We first understood who the users would be, 
what the context of use was, and then evaluated their 
experience before redesigning it. 

We produced an audit report of best practice 
complaints processes by conducting a full audit of the 
existing process to map out every step in the customer 
journey. We then looked at ‘best in class’ complaints 
processes in alternative industries to establish a set of 
best practice principles and inspiration to draw from. | oe 

Taking on board the requirements from a variety of si sietaiiaecanaiae oe: 2 —— Separating content 
internal stakeholders, and the lessons from the audit reunion — 
in stage one, we designed an entirely new complaints 
process which included a fully working prototype of 
our proposed solution. 

After presenting our proposed solution to stakeholders 
and taking on board their refinements, we conducted a 
series of usability tests with OU students (observed by 
the OU team). Following the tests, we refined the 
prototype and tested again until we were confident of the 
final solution. The finished prototype was handed over to 
internal OU design and development teams to implement. 
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Top Experience UX took the long- 
winded information (left) and broke it 
down, keeping the key elements. They 
then looked at how they might redesign 
the page without graphics and within 
ee eee the restrictions of the CMS 


Middle The mockup of the entire user 
Maia Ge Bee journey using lo fidelity prototyping 
(left ) and the live service now (right) 


Assessments and Exams 
What would you like to talk to us about? 


Bottom Once the prototype was 
finalised in terms of content and 
structure, Experience UX did more 
research with OU students to further 
validate the process. They conducted 14 
usability tests of the prototype before 
delivering their finalised version 
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tends to be in Xmind, although there are web- 
based alternatives such as Coggle if we need to 
collaborate with other team members. We also 
rely heavily on Slack for communications and 
Dropbox to organise and back up our work.” 
Laura also advises: “Sometimes sticking toa 
specific tool can be unnecessarily restrictive, 
so it’s worth going back to basics with good 
old-fashioned pen, paper and Post-it Notes, as 
this can often be the most distraction-free way 
of working. If we’re running user-testing we 
have a variety of tools and equipment to run 
the sessions. We use Morae Recorder to 
capture the session on camera and, if we're 
doing mobile testing, we 
like to use AirServer to 


“We also rely heavily on 


looking at the future in terms of just ‘The Web’ 
is also short sighted. Agencies already have to 
design for a much wider scope of technologies 
and touch points including voice interfaces, 
VR, AR and other wearable devices. As an 
experience agency we have to consider the 
end-to-end experience a person might 
have with a company, considering all the 
touchpoints, both online and offline. To limit 
our work to such a small slice of technologies, 
web pages and screens would be to do our 
clients, and their end users, a huge disservice.” 
One of the most important digital spaces that 
brands are racing to support is mobile. Damian 
outlines their approach: 
“All of our projects are 


record what’s happening Slack for Communications multi-device. We don’t 


on the device screen, 
and a document camera 
to see how the device is 
being interacted with by 
the person were testing.” 

The technologies that form the foundation of 
digital experiences today have continued to 
develop. For Experience UX, the technologies 
or the tools in use, will always be secondary to 
the user, as Laura explains: “First and foremost 
UX is about focusing on people, regardless of 
the technology used to build products and 
services for them. The minute technology is 
prioritised over the end user, the person will be 
the one to lose out. Every project we take on is 
grounded in solid user research first, which 
guides the rest of the project and the 
recommendations we make to our clients. 

Any other approach is just guesswork.” 

Laura concludes: “Technologies and the 
methods to create the end products will always 
evolve over time, but humans and their 
behaviours remain relatively unchanged. To be 
limited to a small set of technologies or even 


and Dropbox to organise 
and back up our work” 


believe that a user 
journey can or should 
be looked at from the 
perspective of only 
one device. People interact with technology 
in complex ways with often a series of short 
interactions at different stages of their 
decision-making process. These journeys 
can take place on a variety of different 
devices in many different contexts. Although 
it is tempting to look at a discrete ‘mobile 
journey’, our research suggests that this can 
be a flawed approach, so we are careful to 
look at the whole user journey.” 

One of the most important spaces for brands 
to understand is social networks. Damian 
explains how concentrating too much on this 
aspect of a design can often derail its true 
objectives: “We concentrate on creating great 
customer journeys that convert, rather than 


solely looking at driving traffic from one source. 


Agencies can sometimes focus too much on 
traffic and not enough at conversion. We work 


with clients on a long-term conversion > 


Damian holding a workshop 
in what appears to be the 
basement of a fallout shelter. 
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Timeline 
2007 


Experience Solutions set up winning their 
first major client The Financial Times. 
Employees: 2 


2009 


First UX Training programme developed. 
Team expands with recruitment of UX 
Designer and Architect. 

Employees: 4 


2012 


Experience Solutions move from 
incubation space to their own office. 


2013 


Experience secures a large on-going 
relationship with Siemens Financial 
Services, and Burberry. 


2014 


Experience lands the Open University 
as aclient. The OU are still using their 
services today. 


2015 


Experience Solutions is rebranded to 
Experience UX. 


2016 


Launch of UX Bournemouth quarterly 
events. Experience UX wins their first 
two-year contract with McCarthy & Stone. 
Employees: 8 


2017 


Experience outgrow their offices in 
Bournemouth and move to a bigger 
open-plan space. 


2018 


Launch of one day conference UX Insider 
Bournemouth in October 2018. 
Employees: 12 


E]] UX Consultants 

— Research Consultants 

Ey) UX Director 

§) Commercial Director 

§) Account Director 

~~ Finance/Admin 
Graphic Designer 
Marketing & PR 
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Our work for Lily’s Kitchen started as all our 
projects do, with an initial client planning meeting 
to fully discover what their needs, objectives and 
requirements for the project were. It’s important to 
us that we listen carefully to our clients, and really 
understand both their business and emotional 
needs for the project, to enable us to do a great 
job. We find that keeping communication lines 
open throughout the project are key to happy 
client relationships, so we regularly check in 

to make sure they are kept up to date with 

Our progress. 
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design of the website soon to be launched we 
created a high-fidelity prototype of the website to 
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The testing of the prototype was conducted at 
research labs with in-person moderated sessions, 


to understand where further improvements could FOOD FOR CATS 

be made to the designs. The user-testing sessions Shop by Shop by Shop for 

were attended by the client, and it’s always exciting AGE PRODUCT TYPE SPECIAL DIETS 
to see them witness their customers using their —— Wet food Grain free 
product first-hand. he sini Dry food Organic 


Our observation rooms are always abuzz with 
our customers having the important ‘penny drop’ 


‘, Treats Hypoallergenic 
A Adult (1-6 years) 


Selection boxes 


moments, when a test participant struggles with ee 
part of the interface, or on the other hand enjoying (i | 
an unexpected part of the experience. Those are SHOP ALL RECIPES 


the moments that make our job really exciting. 
Once this user research was completed we 


analysed the observations Tale) findings to report Experience UX undertook high-fidelity prototype testing with the target audience. Their aim was 
back our recommendations for improvements, and to understand what information users require throughout the purchase process. Finally, they 
also created an updated fully working prototype. tested a new JA structure to make sure users can achieve their purchase goals 
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“Sometimes it can be easy iKe) 
quickly jump to conclusions 
about an end user's actions, but 
it takes a keen observer with lots 
of practice and the skills to 
interpret the actions of a person 

using a product, service Or 
company in the way they do 


Laura Yarrow, UX Consultant 


optimisation plan which analyses user journeys 
triggering from multiple traffic sources through 
the conversion funnel. 

“We analyse the data, highlight any areas we 
feel need more investigation, and then conduct 
tactical user research studies to understand 
why people are behaving the way they do. 
Once we fully understand the data, we then 
implement a series of iterative solutions that 
are fully researched with end users.” 

Laura also explains how new technologies 
are impacting the approach they take when 
working with their clients: “Recently we have 
been exploring Jobs to be Done (jtbd.info) as 
a research framework; it’s a thought-provoking 
approach to helping clients understand why 
they should be investing in the type of 
research work we do. 

“Sometimes it can be 
easy to quickly jump to 
conclusions about an 
end user’s actions, but 
it takes a keen observer 
with lots of practice and 
the skills to interpret the actions of a person 
using a product, service or company in the 
way they do. Jobs to be Done (JTBD) can be 
a useful guide for what you are trying to 
achieve in your research and, can be used 
to check if you really have found the Job’ 
your product or service is being hired to do. 

“Lately, we've also been fascinated by 
some of the accessibility-related issues 
we've uncovered in our user testing and, 
have enjoyed using the Funkify Chrome 
browser extension to check if the designs 
we create are inclusive enough for those 
with a variety of visual, physical and 
cognitive needs. 

“It’s also been interesting to try out some 
of the newer online tools available such as 
Overflow.io, RealtimeBoard (realtimeboard. 
com) and Smaply.com for rapid experience 
mapping online. The advantage of using online 
tools is that, as a team, we can all collaborate 
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“We want to lead the way 
in challenging the wider 
community to deliver 
great user experiences” 


on each other’s work, with the output being a 
professional and consistent-looking end result.” 

As specialists, the people that work for 
Experience UX need to have a particular skill 
set but, as Damian outlines, a specific attitude 
is even more important: “The core attribute 
we look for is an authentic passion for UX. 
Someone who loves improving experiences, 
who enjoys learning more about good 
experience design and what makes a user 
journey poor. People who work here definitely 
have an empathetic nature, and a strong desire 
to keep learning and share their knowledge 
with one another. 

“The other vital aspect is cultural fit with the 
team. We want people with a strong ethical 
compass and a set of values that match with 
our own. Ultimately, as a 
team we believe that life 
is stressful enough. If we 
can make experiences 
seamless and enjoyable 
instead, we can go 
home fulfilled at the 
end of the day. The great part is that it’s a 
win-win for our clients, their customers, 
and everyone who works here.” 

And looking to the future, as the digital space 
continues to diversify and touch even more of 
our lives, how will Experience UX shape these 
Spaces and how we all interact with today’s 
and tomorrow’s technologies? “It’s genuinely 
a fantastic time to be in UX at the moment,” 
Damian concluded. “There are so many 
exciting changes in the industry and the 
constant evolution requires us to always 
learn and challenge ourselves. 

“It’s one of the reasons we have set up UX 
Bournemouth (uxbournemouth.co.uk); a 
series of evening talks with industry leaders, 
and have recently launched UX Insider 
(uxinsider.net), a one-day conference on 
16th October. We want to lead the way in 
challenging the wider community to deliver 
great user experiences and we hope to do this 
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Experience UX clearly have a 


major case of Post-it-itus 


by growing a tribe of people interested in UX 
who are all keen to learn and adapt to the 
changes in the industry together. 

“As a business, the direction we are heading 
in is one where we focus on the overall 
experience. As digital becomes more 
integrated in business as a whole, we believe 
that the customer journey is much less about 
a series of touchpoints, and instead more of a 
series of moments. We're working with 
companies who are keen to make those 
moments innovative and delightful.” 

The web, social media, mobile, VR and AR 
are all spaces that millions of people traverse 
every day. However, how users experience 
these channels is often overlooked. Experience 
UX, then, have a mission to not only understand 
how users move through these spaces, and 
how technology can support their needs and 
desires, but also to understand how digital 
channels and their enabling technologies 
will continue to evolve in future. 


experienceux.co.uk 


Founders 
Ali Carmichael and Damian Rees 


Year Founded 
2007 


Current Employees 
12 


Location 
Bournemouth and London 


Services 
UX Research 
UX Architecture 
UI Design 
Conversion Rate Optimisation 
UX Training & Mentoring 
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CSS is changing fast. Here’s our guide on the rules 
to use now, and what to keep an eye on 
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EXAMPLE 5 
For example, the following rule 


@supports ( display: flexbox ) { 
body, #navigation, #content { display: flexbox; } 
#navigation { background: blue; color: white; } 
#article { background: white; color: black; } 


} 
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EXAMPLE 6 


@supports not ( display: flexbox ) { 


applies the rules inside the ‘@supports’ rule only when ‘display: flexbox’ is supported. 


body { width: 100%; height: 100%; background: white; color: black; } 


#navigation { width: 25%; } 
#article { width: 75%; } 
} 


The following example shows an additional ‘@supports’ rule that can be used to provide an alternative for when ‘display: flexbox’ is not supported: 


Note that the ‘width’ declarations may be harmful to the flexbox-based layout, so it is important that they be present only in the non-flexbox styles. C S S @ Ss u p p O r t Ss Ss a 
great way to build 

EXAMPLE 7 your project 

The following example checks for support for the ‘box-shadow’ property, including checking for support for vendor-prefixed versions of it. When the support is present, it specifie: g r a Cc ef Uu ly wit h t h e 


both ‘box-shadow’ (with the prefixed versions) and ‘color’ in a way what would cause the text to become invisible were ‘box-shadow’ not supported. 


@supports ( box-shadow: 2px 2px 2px black ) or 


maar 


-moz—box-shadow: 2px 2px 2px black ) or 
-webkit-box-shadow: 2px 2px 2px black ) or 


latest techniques 
while taking into 


-o-box-shadow: 2px 2px 2px black ) { id . 
outline { consideration 
color: white; 
—moz—box-shadow: 2px 2px 2px black; backward 
-webkit-box-shadow: 2px 2px 2px black; bili 
-—o-box-shadow: 2px 2px 2px black; compat I Ity 


> Feature queries (@supports) 
Check if a feature is supported before relying on it 


When building components that 
use new and potentially 
unsupported features, it’s 
important to include a fallback. 
This has been achieved using 
feature detection via JavaScript 
with plugins such as Modernizr. 
Now, this is possible directly 
inside CSS using the new 
@supports syntax. 

With the addition of @supports, 
also Known as a feature query, we 
can check whether the code we 
would like to use is or is not 
Supported: 

@supports (display: flex) { 

-hagrid { display: flex; } 


@supports code overriding default 
styling. In other cases, it may be 
preferable to include another 
@supports check to see if code is 
not supported. This is achieved 


with by negating the feature query: 


@supports not (display: flex) { 
.dobby { display: block; } 
: 
Multiple checks can be combined 
to see if all the required features 
are supported at the same time, in 
order to apply either all or none of 
the style rules atomically. 
The syntax for this is very 
similar to combining media 
queries, such as applying styles 


and applies the style if at least one 
is supported: 
@supports (display: flex) or 
(transform: scaleY(1.5)) { 
.grawp { 
display: flex; 
transform: scaleY(1.5); 
} 


} 
Something which is useful given 


that we have already covered CSS 
variables is that with @supports 
you can also check to see if a 
custom property is supported or 
not, which can be done with the 
following approach: 

@supports (--ron: orange) { 


Andrew Collinson 
Ul Team Lead - Mirum 


Graceful 


} on devices between specific body { a 
When the page is loaded, a check sizes. This is achieved by using color: var(--ron); deg radation 
will be performed to see if the the ‘and’ operator and multiple } 


browser in use supports the flex 
feature. If it does, the styling within 
the support braces will be applied 
by the browser. 

If it is not, it will be ignored - it is 
worth having a fallback option for 
when the feature being queried is 
not supported. 

The most appropriate way to 
include the fallback code will 
depend on the project and what is 
being changed as there may be 


feature queries: 

@supports (display: flex) 

and (transform: scaleY(3)) { 
.fluffy { 

display: flex; 

transform: scaleY (3); 

3 


} 
The counterpart combination 


query for the ‘and’ operator is the 
‘or operator, which checks if either 
of the feature queries matches 


} 
With the above example a check 


will be carried out to see if the 
custom property condition is 
Supported and when it is the body 
will have a font colour of orange 
applied. @supports is available to 
use in all browsers with the 
exception of IE 11 and below, 
although some polyfills are 
available if you do need to support 
as far back as Internet Explorer 9. 
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This is a great way to build in 
new styling rules, but it is also 
just as helpful at ensuring you 
build websites that degrade 
gracefully. If you use @supports 
then also use it to check if the 
browser does not support your 
CSS rules, this doubles work 
but creates something which 
downscales browsers more 
elegantly. 
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CSS,Grid 


Build custom print-style layouts with less code than ever before 


STARTING OFF 
WITH THE GRID 
CAN BE 
DAUNTING AT 
FIRST, BUT IT’S 
SMOOTH SAILING 
ONCE YOU GET 
TO GRIPS WITH 
THE SYNTAX 


The arrival of Flexbox has allowed 
us to spend less time polluting our 
code with clear fixes, hacks and 
workarounds, and focus more on 
writing concise CSS and HTML. 
While Flexbox is essential for any 
Ul dev’s toolbox, it’s best suited for 
working in one single direction ata 
time. This is usually enough, as we 
are usually only restricted on one 
axis at a time (for example, the 
width of the page is restricted, but 
not the height). 

However, in the cases where we 
are restricted in both dimensions, 
Say a dashboard style app, then 
CSS Grid is definitely one to shine. 
Starting off with the grid can be 


feature 


daunting at first, but it’s smooth 
Sailing once you get to grips with 
the syntax. Say we have the 
following HTML structure: 
<div class=”container’> 
<div 
class=”eryffindor”>Gryffindor</ 
div> 
<div 
class=”slytherin’>Slytherin</div> 
<div 
class=” ravenclaw”’>Ravenclaw</div> 
<div 
class=”hufflepuff”>Hufflepuff</ 
div> 
</div> 
We can define the grid, set the 
dimensions, and then define 


named areas for our grid cells: 
container { 
display: grid; 
width: 100vww; 
height: 1@Q@vh; 
i 
container > div { 
border: 2px solid #0QQ; 
} 
.gryffindor { 
grid-area: gryffindor; 
background-color: #C91018; 
i, 
.Slytherin { 
grid-area: slytherin; 
background-color: #26A147; 
} 


.ravenclaw { 


Finally, on the .container we can 
make use of the grid-template- 
areas property to lay out what we 
want the grid to look like: 


Additionally there 
are a whole host of 
additional properties 
to fine tune the 
presentation of the grid. To 
name a few: 


- gutter between columns 


- gutter between rows 


desktop breakpoint. 
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- width of columns, space 
separated for multiple 


- width of row, space separated for 
multiple 


- where to 
vertically align the contents of 
each grid cell, where stretch is to 
vertically fill the cell entirely 


- similar to except 
along the horizontal axis instead 


- shorthand 
notation, combining 
and 
So in practice, we could update our 
previous grid: 


paused, which will be useful if 


you've ever got any videos in 
your build. Unfortunately this 
code is in draft so it not fully 
supported yet. 


This is all just barely scratching the 
surface of the possibilities of CSS 
Grid - there’s so much more that 
can be done. Currently this 
is Supported in all 
modern browsers, 
with IE11 being the 
exception, 
whereas it 
supports the 
older syntax. 
But, wait, 
there’s more, with 
the use of CSS Grid 
we're finally able to 
centrally align content 
without the stress! 
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CSS Filters are probably one of the 
most powerful aesthetic tools you 
can use in your code to update the 
appearance of your build as they 
are a method of editing images in 
your build using only CSS. 

There are several effects you 
can apply with CSS filters but 
importantly you can chain some of 
these effects together so you can 
apply a contrast and grayscale 
effect to an image if you are 
hoping to make an expressive 
gallery of images. 

The effects which can be 
applied are blur, 
brightness, contrast, 
drop-shadow, 
grayscale, 
hue-rotate, 
invert, opacity, 
saturate, sepia 
and also apply an 
SVG filter. 

The good thing 
about the filter code 
is its simplicity. It is easy 
to remember and understand 
what is going on, as to declare the 
effect you want is often as simple 
as saying something like the 
following code: 


Chaining 
filters 
Try applying more than one 
filter to an image to give ita 
more creative difference, 
something like applying 
grayscale and contrast 
changes to give your images 
that more striking look 
inside a gallery. 


CSS FI lters Creating visual effects with your CSS 


.flitwick { 

filter: drop-shadow(1@px 1px 
10@px rgba(@,0,0,.9)); } 
.lockhart { 

filter: saturate(8); } 
.mcgonagall { 

filter: hue-rotate(9@deg); } 
.snape {filter: blur (5px); } 
What the example above would do 
is apply three chained filters to an 
image which are blur, hue-rotate 
and drop-shadow; admittedly 
drop shadows in CSS already exists 
so this one isn't that great of 

an addition. 
There are some 
known issues with 
filters, such as the 
ordering when 
chaining effects, 
which can 
sometimes have 
adverse effects 
- if you were to 
apply grayscale 
after sepia it would 
result in an entirely 
greyed out image. 

Browser support is also a little 
problematic as there is no support 
in Opera Mini, IE 11 and below, and 
Edge only has partial support. 
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Filters is a great way 
to apply visual 
changes to the same 
old images whether 
this be through 
default states or 
changing a hover/ 
active state of an 
image hyperlink. 


Andrew Collinson 


1. blur(S5px) 

This works by defining a blur 
size in px to your image. The 
higher the number the greater 
the blur, for instance, blur(Opx) 
would create a strong blur 
effect. 


2. grayscale(100%) 
Applying this filter converts the 
image to grayscale. The value to 
change to complete grayscale 
would be 100% or 1, and to 
change to semi-grayscale you 
could use 50% or .5. 


3. saturate(1) 

The use of this completely 
changes the colouring of the 
image making everything more 
vibrant. Saturation works ina 
similar way to grayscale with 1 
or 100% being complete 
saturation. 


Resetting 
with ‘all’ 


No doubt you have encountered 
a situation where you wished 
there was an easier way to 
revert several properties to their 
default, rather than having to 
juggle several properties at the 
same time. ‘All’ isn’t as yet 100% 
browser compliant and does not 
work in IE, Edge or Opera Mini. 


4. hue-rotate(9Odeg) 
This is probably the most 
unpredictable filter as it works 
by rotating the colour balance 
of the image. Updating the 
rotation can be done using 
degrees, turn or radians. 


:root { 
--color-background-inverse: # 
--color-background-main: white; 
--color-background-backdrop: # 
--color-text-default: # : 
--color-text-heading: green; 


--font-family-heading: 


‘Open Sans‘, Arial, 


Sans-serif; 


--font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace; 


--font-family-text: 


‘Open Sans‘, Arial, 


(@, @, @, 0.3), @: 15pxK: 12px 


--shadow-card: @ 19px 38px 
--spacing-Llarge: 2rem; 
--spacing-medium: i1rem; 
--spacing-small: @.5rem; 
--radius-large: 0.5rem; 
--radius-medium: @.25rem; 
--radius-small: @.125rem; 
--duration-instantly: Qs; 
--duration-immediately: 0.05s; 
--duration-quickLy: 0.1s; 
--duration-promptly: 0.2s; 


--duration-slowly: 0.4s; 


Sans-serif; 
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(0, 0, 0, 0.22); 


CSS Variables Reduce repetition and dry out your code with variables 


Within CSS, to reuse code 

throughout a build, you used to 

have to type it out manually over 

and over, then preprocessors 

came along and the world was 

good - except you had to install 

and compile them, which wasn't 

always as easy as it should be. 
Now within CSS you are able to 

use custom variables that 

allow you to pass 

through a string of 

content into your 

code suchasa 

colour or size etc. 

Yet, unlike 

preprocessors, 

you can update the 

variable to be 

something different 

when used within a media 

query, which removes the 

necessity of declaring a 

specific variable to be used in 

each media query. 


The variable is declared inside 
‘root’ and is then applied to your 
tag via the ‘var(--variable-name)’ 
code, but as you can see by the 
example above we have then 
overwritten those variables for 
screen sizes larger than 768px so 
we no longer need to create an 


individual variable for each 
breakpoint we support. 

The overall simplicity and 
cascading element of CSS 
Variables makes it easier and 
cleaner to use in your build than 
variables within preprocessors. 
This allows you to create much 
cleaner default styling throughout 
your build while still using the 
same variable. 


CSS Variables can also be nested 
within one another, which can be 
helpful when working with large 
builds that are changing 
frequently. For example, you could 
do the following: 


Overall, it is debatable whether 
you should use CSS Variables or 
not. Ultimately it all depends on 
what you have to support for the 


build you're doing, but as far as 
browser support goes, variables 
are supported in all browsers 
except for Opera Mini, Samsung 
Internet 4 and old faithful Internet 
Explorer 11 as always. 

One thing worth mentioning is 
that Microsoft Edge does support 
variables but with a few known 
issues in release 15 which are: 
¢ You can not apply a CSS Variable 

to an item that is a pseudo 

element such as ‘::before’ and 

‘safter’. These issues 

unfortunately vary from 

applying background or border 

colours, or to applying 

animations to pseudo elements. 
¢ Animations that use CSS 

Variables have been known to 

cause the browser to crash 

entirely - not ideal. 
¢« Nesting variables within 
variables causes an error in 

Edge 15 that results in the 

browser not reading the variable 

at all; therefore no value is 
assigned to your component. 

Fixes are imminent, hopefully. 
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Round 


‘Background-repeat’ has been a 
stable part of CSS for what seems 
like an eternity, but there are two 
lesser known options available - 
Round and Space. Both of these 
options work by ensuring that 


Space 

‘Background-repeat: space; tiles 
the image in both directions, 
similar to how Round works, 
except instead of resizing the 
image until there is more space to 
display another tile, it will instead 
create white space between the 
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100 per cent of the background 
image declared is repeated and 
visible at all times, but they work in 
Slightly different ways and will 
make a subtle difference to how 
images appear. 


tiles until another row or column 
can be shown. 

The use of either of these 
options isn't relatively new or 
massively beneficial but it will give 
you that little extra control of the 
repetition of images in your layout 


feature 


What ‘background-repeat: 
round; does is to repeat your 
background image without ever 
cropping the image, but will resize 
the image evenly until there is 


enough space to fit in an extra tile. 


as you can control the way the 
tiling effect takes place over 
various viewport sizes. What is 
also very useful about these two 
options is that they are supported 
by every browser so they can be 
used without concerns. 


Background repeat 
round is especially 
useful if your tiled 
background image 
looks strange if you 
can only see a part of 
it. For example, if you 
have a chessboard 
background, it makes 
more sense to show it 
slightly stretched 
than having a 
cropped tile. 


Paul Sandwell 
Ul Engineer - Mirum 
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CSS Shapes 
(shape- 
outside) 


Something that has previously 
been lacking from CSS was 

the ability to wrap content 
cleanly around images that 

do not have squared edges. 
This doesn't create visually 
pleasing layouts, but now 

with the introduction of 
‘shape-outside’ you can create 
more adaptive layouts that 
resemble something closer to 
a magazine layout than our old 
standard floated block images. 
To use ‘shape-outside’ you 


-= 


Max 16/9 Min 16/9 


@media (max-aspect-ratio: 16/9) { @media (min-aspect-ratio: 16/9) { 
background: red; background: blue; 


} 


} 


Lo 


CSS ‘will- 
change’ 


This relatively new feature of 
CSS has little impact on the 
appearance of your page - it is 
more of a processing tool than 
anything. 

The idea with ‘will-change’ 
is to help the browser 
understand and prepare for 
elements of your code that will 
change when interacted with. 

For example, when 
interactions are performed 
with CSS, the browser will do 
the best it can to plan ahead 
for what changes may occur. 
And with the addition of ‘will- 
change’ you can notify the 
browser in advance of what 
may change so it can prepare 
better. This will result in any 
interactions you need being 
more responsive. 


Computed styles 


» Aspect ratio 


Detect viewport ratio instead of width 


The introduction of media queries 
changed the way we build 
websites. We were given the 
opportunity to build our layouts 
depending on the way the user 
viewed the page. More often than 
not this would be based purely on 
the viewport width or height but 
recently there has been a new 
option added. 

Now you are able to apply CSS 
based on the page's viewport via a 
media query that detects the 
aspect ratio of the window you're 
browsing with. You are also able to 
detect whether the window 
matches a maximum or minimum 
aspect ratio too. 

The code to use for this is fairly 
simple, as it matches the 
convention used with any other 
media query declaration, which 
would be something like: 

@media screen and (aspect-ratio: 


16/9) { 

Your CSS 
; 
@media screen and (min-aspect- 
ratio: 16/9) { 

your Css} 
While useful there are only a few 
scenarios in which aspect-ratio 
media queries would be useful. If 
you are building something 
specifically for mobile devices you 
could use the min/max aspect- 
ratio to target whether the user is 
browsing in landscape or portrait 
mode, but this is also covered with 
the orientation aspect ratio. 
Fortunately, in terms of support, 
aspect-ratio is accepted widely 
across the browsers. If this is really 
something you could use then 
there is little standing in your way 
- all major browsers support it, 
with Internet Explorer support 
going as far back as version 9. 
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should first apply it to a floated 
element such as an image, and 
then in your CSS you declare 
which shape method you 
would like to use. The options 
available are: 
e circle: create circular 

shapes 

ellipse: create elliptical 

shapes 

inset: create rectangular 

shapes 

polygon: create any shape 

with 3 or more vertices 

url: identifies which image 

should be used to wrap 

text around. This works 

by placing text within the 

transparent areas of the 

image. 
The support for ‘shape- 
outside isn't particularly 
good yet, as Internet Explorer, 
Edge and Opera Mini all offer 
no support, but Firefox has 
now begun supporting it 
from release 62 onwards. The 
support of ‘shape-outside’ in 
Microsoft Edge is currently 
under consideration, but there 
is no official word on when it 
could be implemented. 
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Blend- mode A new way to combine images and colours for unique visuals 


Applying background images is 
typically a stable part of every 
project build. But sometimes there 
is the need to be a little more 
creative with what can be done 
with the background image. This is 
where ‘blend-mode’ comes in to it. 
By using ‘blend-mode’ you've 
got a little more freedom over how 
a background image works with 
the background colour instead of 
the usual background on top of 
the background colour. ‘Blend- 
mode’ works by combining the 


THE CODE TO USE 
FOR BLENDING 
YOUR 
BACKGROUND IS 
FAIRLY SIMPLE 
- ALL YOU NEED 
IS ONE LINE OF 
CSS 


background image with the 
background colour with a defined 
style. The options you can use are 
normal, multiply, screen, overlay, 
darken, lighten, colour-dodge, 
saturation, colour and luminosity. 
The code to use for blending 
your backgrounzd is fairly 
simple - all you need is 
one line of CSS to 
merge the 
background image 
with the 
background 
colour. 
background-blend- 
mode: xblending- 
options; 
Blend modes are 
available to use in almost all 
browsers with the only exceptions 
being all versions of Internet 
Explorer and Opera Mini. Note that 
blend modes work in all version of 
Microsoft Edge. 


1. Overlay 

Using a blend mode of overlay 
works by mixing both the 
background image and colour 
together to echo the darkness or 
lightness of the backdrop area. 
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Be 
creative 


Try something different 
and instead of applying 
‘blend-mode’ to your 
background image try placing 
it on text that overlaps your 
image instead for a 
translucent effect. 


2. Difference 
Using a blend mode of difference 


results in a more creative outcome. 


This works by subtracting the 
darker colours from the 
background image/colour from 
the lightest colours, which results 

in the image having a very high 
contrast effect. 


3. Luminosity 
Luminosity is one 
of our favourite 
visual effects. It 
kind of creates 
that washed out, 

old photo look. 

Luminosity works by 

preserving the top 

colour while fading hue and 

Saturation of the background. 


4. Chaining blends 

When it comes to applying blends 
to your background image you 
needn't use just one mode. You 
can chain multiple blending effects 
together to create a more unique 
effect by using something similar 
to the code below: 
background-blend-mode: multiply, 
darken; 


currentColour 


currentColor is something that 
has creeped into our daily code 
usage, however, the support for 
codecolor isn’t something new 
having been supported in all 
browsers from Internet Explorer 
11 and onwards. 

The idea behind currentColor 
is to declare your colour of 
choice via ‘color: OOO; and 
then when you want to apply 
the colour to something else 
like a border, for example, you 
would use ‘border: 1px solid 
currentcolor;. This will result 
in the border colour matching 
the declared text colour. 
Additionally, the colour then 
cascades down as your styling 
changes. Pretty cool, eh? 

If you were to declarea 
colour ona link and then apply 
currentColor to a border and 
SVG icon within that link, these 
would also change when you 
declare your hover and focus 
states like all responsible 
developers should be declaring. 


Object-fit 


ae cover’ works for backgrounds, 
but what about inline images? 


Getting an image to fill a content 


box is often done by making use of 


the ‘background-size: 

coverlcontain’ styles, however, 

previous attempts to recreate this 

behaviour for images or videos 

has been somewhat clunky. 

Thankfully the ‘object-fit’ property 

has emerged, seemingly out of 

nowhere, to help. This can be used 

to achieve the same result but on 

media assets such as images and 

videos. ‘Object-fit’ can take five 

values: 

¢ ‘Fill’: stretches the asset to fit the 
parent container 

¢ ‘Contain: scales the asset to fit 
inside the parent container, 
maintaining aspect ratio (similar 
to ‘background-size: contain’) 

¢ ‘Cover: scales the asset to 
completely fill the parent 
container, cropping from the 
sides where necessary (similar 
to ‘background-size: cover’) 

¢ ‘Scale-down: similar to contain, 
however, this will only scale the 
asset down, and not make it 
larger than it is natively 


¢ ‘None: Render the asset as it 
would normally. 

This property can also be 

combined with ‘object-position’ to 

determine where the asset should 

be scaled from. 

To apply ‘object-fit’ to your 
images it is fairly simple in that all 
you need is something similar to 
the code below: 


It is important to remember height 
and width of the area you'd like to 
cover otherwise the image will 
take on its default aspect ratio. 
This will most likely result in the 
image spanning 100% width of 
your available area. 

In terms of browser support, 
‘object-fit’ is quite compliant as it is 
supported in all browsers with two 
exceptions. There is no support at 
all in Internet Explorer, while 
Microsoft Edge supports object-fit 
on images only. So don't use if you 
need to support either. 


5. Regions 


https://drafts.csswg.org/css-regions-1 
The core concept behind regions is being able 


to say, “Display this content over there 
instead.” By setting an area of the document 
as anamed region, content from other parts 
of the page can be moved into a different part 
of the document flow. Unfortunately, the draft 
for CSS Regions has not been updated in 
some time and may be dropped. 
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Bringing it all together 
The main reason for using Three js to render the scene into WebGL is to give a 
consistent feel to the graphics. Transparency effects, blending and the like are 
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1. Text switching 
To recreate the text switching effect as seen on the 
homepage of Hassyadai, there will be a basic HTML 
layout that has been created in the ‘start’ folder of the 
tutorial files. To make the images get larger on rollover, 
two classes will create that transition. 

.grow { 

transition: all .7s ease-in-out; 

3 

.makeGrow { 

transform: scale(1.3); 


I 


2. Showing the text 
To show the text the ‘hidden’ class will be dynamically 
switched in and out on the text elements. This just has no 
Opacity. Because of the transition on the text elements, 
the opacity will fade in and out. 

-hidden { 

opacity: Q; 

3 

#main, 

#leftText, 

#rightText { 

transition: all .7s ease-in-out; 


I 


3. Making it work 
The functionality of this will all be controlled through 
JavaScript. Here the code is added to script tags at the 
bottom of the page. The code is referencing all the 
elements on the page that need to be controlled so that 
they are cached in variables. 

var over = false; 

var middle = window. innerWidth / 2; 

var grid = document. getElementById(“grid”) ; 


var main = document. getElementById(“main”) ; 
var leftImg = document. 
getElementById(“leftImg”) ; 

var rightImg = document. 
getElementById(“rightImg”) ; 

var leftText = document. 
getElementBylId(“leftText”) ; 

var rightText = document. 
getElementById(“rightText”) ; 


4. Grabbing the mouse 

In order to make this work, the mouse position is needed. 
The overall container object is grabbed just to see if the 
mouse is over it or not. As there are many sub elements 


that are visible or not, these will interfere with just doing a 
rollover test on individual elements. 
grid.onmouseover = function() { 
main.classList.add(“hidden’) ; 
over = true; 
a, 
grid.onmouseout = function() { 
main.classList. remove (“hidden”) ; 
over = false; 
3 
document.onmousemove = function() { 
var xX = event.clientx; 


5. Left or right 


Once over the container, the mouse is checked to see 
which side it’s on. If it’s the left, then the text over there is 
faded onto the screen and the image is scaled up to 
make this the most Obvious. 
if (over == true) { 
if (x < middle) { 
leftImg.classList.add(“makeGrow’) ; 
leftText.classList.remove(“hidden’) ; 
rightImg.classList.remove(“makeGrow”) ; 
rightText.classList.add(“hidden’’) ; 
} else { 
leftImg.classList. remove (“makeGrow”) ; 
leftText.classList.add(“hidden”) ; 


6. Over and out 
The last part of the code is to restore everything to 
normal in the ‘else’ statement shown here. This restores 
the text to be invisible and the images to be their regular 
size if the mouse is not over the container. 
rightImg.classList.add(“makeGrow’”) ; 
rightText.classList.remove(“hidden”) ; 
} 
} else { 
leftImg.classList. remove (“makeGrow”) ; 
leftText.classList.add(“hidden”) ; 
rightImg.classList.remove(“makeGrow’”) ; 
rightText.classList.add(“hidden’’) ; 
} 
J 
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ebGL 3D enables browser-based 
experiences, based on the 
powerful OpenGL language. It taps 
into the graphics pipeline, for highly 
optimised, interactive experiences. Wide browser and 


device support for WebGL makes it a perfect approach 
for real-time rendering. No plugins are required and you 
can start learning these technologies right away. 
Complex models with high levels of detail, reflections, 
environment maps and shadows can all be generated in 
real-time. You can give users access to beautiful visual 
experiences, on their desktops or in the palm of their 
hand. Sites, games and apps, can allow users to direct the 


action, move the camera and objects, navigate 3D worlds, 


and much more. 

You'll be using the popular 3D library Three js to dive 
into creating scenes, and animating objects. It’s free and 
open source, lightweight and boasts countless 
award-winning websites that have used it. Facebook 3D 
objects are also now powered by this 3D library. 

Continuing from the last tutorial, you will move onto 
lighting your scene and creating cool shadows. To do this 
you will learn about basic lights, materials and settings to 
enable your shadow casting. Other than having a 
JavaScript background, you can dive into this tutorial with 
no prior knowledge and get some great results. The goal 
is to demystify 3D web programming and get you 
inspired and well on your 3D journey. 


1. Create HTML file 


To get started, you need to set up a basic HTML file. You 
can set up external CSS and JavaScript files or include 
inline for simplicity. Threejs's renderer class will create a 
<canvas> element for you. Add the following code to your 
index.html file. 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
</style> 
</head> 
<body> 


Camera 


Setting up the camera allows you 
to define aspect, field of view and 
culling. This diagram helps illustrate 
these elements 


<script> 

</script> 
</body> 
</html> 


2. Include the Three.js library 
Include a link to the Three js library in the head of your 
file, either hosted externally or download it from the 
Three js repository. You can find the library and minified 
JavaScript here: https://github.com/mrdoob/ Three,js. 
Note: the code in this tutorial has been tested on the 
latest release of Three js - v91. 

— <script src=”’libs/three.min. js”></script> 


3. Add basic CSS 


In your ‘style.css or between your style tags, set Up a 
couple of basic styles. These are simple style rules to 
keep your canvas full screen, removing any margins or 
padding. We'll handle sizing of the renderer later on. In 
the last tutorial (WD276) you also saw how to create a 
window resize handler. 
html, body { 
margin: Q; 
padding: @; 
3 
canvas { 
width: 100%; 
height: 100% 
3 


4.Create a 3D scene 
You're going to add a basic 3D scene, which will be the 
container for your objects. The scene is the stage that will 
render with the camera. All 3D presentations will have a 
scene or stage of some form. What is in that stage and in 
view of the camera is what the user will see. Add the 
following code to add a scene: 

// create a scene object 

var scene = new THREE.Scene(); 


5. Add a perspective camera 


Next, you need to add a camera. You'll use the 


Near Clipping Plane 


Field of View 
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perspective camera, meant for 3D scenes. The first 
attribute is the field of view of the camera. The second is 
the aspect ratio ( width/height). Then you indicate the 
near clipping plane and the far clipping plane distances, 
which define what is to be visible to the camera. Also push 
the camera back in Z space a little to see things easier. 

var camera = new THREE.PerspectiveCamera( 

75, window. innerWidth/window. innerHeight, 

Q.1, 1000 ); 

camera.position.z = 15; 


6. Add a renderer and canvas 
The renderer handles the drawing of the objects in your 
scene that are visible to the camera. Set the ‘antialias 
property to true, to get smooth edges on our object. You 
can also define the size of the draw area to full screen. 
The renderer creates a ‘domElement which is actually an 
HTML <canvas> element that you can then append to the 
body. Additionally, you could specify an existing canvas 
element to craw to if you prefer, via the ‘canvas attribute 
of the renderer. 

// create a renderer 

var renderer = new THREE.WebGLRenderer ({anti 

alias: true}); 

renderer.setSize( window. innerWidth, window. 

innerHeight ); 

document. body.appendChild( renderer. 

domElement ); 


7. Create object geometry 
Threejs includes plenty of primitive geometries to get 
Started. Try out a Torus Knot using the 


Defining a 3D 
object mesh 


3D objects meshes are much like physical 


objects. They are comprised of geometry and 
materials. Geometry defines the shape through 
vertices, faces etc. Materials are the ‘skin’ that 
textures the geometry. The Mesh is the result of 
combining geometry and materials together. 


Far Clipping Plane 


Z Axis 
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Step10 

Initially you use Normal Materials to see your object in 
3D space without having to set up lights. With the basics 
set, you can move onto adding lights and shadows 


Step 13 

Using a Standard Material uses a ‘physical’ shader that 
emulates natural light and surfaces. Lights reflect 
accurately off its surface for a realistic finish look 


Step17 

Adding the ground plane to receive shadows will allow 
you to see what is being cast by your object. This is 
rotated 90 degrees to lie flat like a floor 


‘TorusKnotBufferGeometry. The first two attributes are 
torus radius and tube radius. The next two are the tube 
segments and radial segments, which determine the 
amount of divisions or faces that will be made along the 
Surface. Try experimenting with the last fifth and sixth 
variables to generate some really cool shapes. 

// create a 3D object 

var geometry = new THREE. 

TorusKnotBufferGeometry( 4, 


); 


0; 00, 60,133,190 


8. Create a material 

Next, you need a material. Three.js includes a range of 
materials including physical shaders, lambert and phong. 
You can set textures using video or images as well. Use a 
‘MeshNormal!lMaterial for now. This way you can see the 


Shadows in 3D 


In order to cast shadows, calculations are required 


by the renderer via ray-casting. You must enable 
shadow mapping in the renderer, set objects to cast 
and/or receive shadows and define shadow casting 
in the lights that will create them. 
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object without needing to light it. You'll get into lighting 
once you Nave the scene rendering. 

var material = new THREE. 
MeshNormalMaterial () ; 


9. Create a mesh and add it 
to the scene 
To create an object ‘mesh’? you combine the geometry 
and material you just defined. Physical objects in 3D 
require a geometry that defines the faces, vertices and 
drawing of the shape. They also require a material or skin 
to cover that object so we can see it. Create the mesh 
object and add it to the scene, like this: 
var object = new THREE.Mesh( geometry, 
material ); 
scene.add( object ); 


10. Render the scene 

Rendering is the function of drawing the scene data to 
the ‘canvas’ element. Now that you have a scene, camera, 
and a 3D object, you can render it. You'll set this up in a 
render loop next, but for the time being, use this code to 
see your 3D object so far. 

— renderer.render( scene, camera ); 


11. Render each 
‘requestAnimationFrame’ 
You bind your render function in a loop to the 
‘requestAnimationFrame function. It will optimally run at 
6Ofps, and ensure the browser is ready to render the 
next frame. To animate scenes smoothly you need to 
render at least 24 frames per second (ideally 60 fps). 
Replace that last line of code for rendering with the 
following snippet: 
// render the scene 
var animate = function () { 
requestAnimationFrame( animate ); 
renderer.render(scene, camera); 
3; 


animate() ; 


12. Animate your object 
To animate the object's rotation, you can add the rotation 
code inside the render loop to update the rotation every 
frame. In Three js these are in radians not degrees 
radians = degrees x (Math.PI / 180). Update your render 
loop to look like this: 
var animate = function () { 
requestAnimationFrame( animate ); 
object.rotation.x += Q.Q1; 
object.rotation.y += 0.03; 
renderer.render(scene, camera); 
3; 


animate() ; 


13. Use light reactive materials 
Normal materials were used initially to enable seeing the 
object without the need for lights. Try using a standard 
material next, to emulate a real world look. Update your 
object code block to the following: 
var geometry = new THREE. 


TorusKnotBufferGeometry( 4, .5, 60, 60,13,10 


); 

var material = new THREE. 
MeshStandardMaterial( { color: Q@xee3333 } 
); 

var object = new THREE.Mesh( geometry, 
material ); 

scene.add( object ); 


14. Add an ambient light 


There are a number of lights in Three.js and most 3D 
applications. These include directional lights, spot lights, 
point lights, ambient lights and many others. Ambient 
lights will cast a general light on the entire scene, with no 
direction. Add one to your scene, setting a colour and an 
intensity like this: 

// create an ambient light 

var light = new THREE.AmbientLight( 

Oxffeecc,.4 ); 

scene.add( light ); 


15. Add a primary light 
Spot lights are one of the lights capable of casting 
Shadows. These are like the classic theatrical lights, used 
to light a character on a stage. They are directional and 
have a specific area of intensity. Move outside that area 
and you step out of the light. Add a spot light like so: 
//Create a SpotLight 
var light = new THREE.SpotLight( Oxffffff, 
0 J} 
scene.add( light ); 
light.position.set(3,4,15); 


16. Add a secondary light 


The art of lighting is complex and involves studying 
scenes in real life, film and various mediums. You can add 
as many lights as you wish and experiment with various 
looks. This secondary light is often called a fill light. Add a 
second light to your scene to create even more light and 
Shadow effects: 

var light = new THREE.SpotLight( @xff0000, 

4); 

scene.add( light ); 

light.position.set(-5,15,5); 


17. Create ground plane 
In order to see the shadows you'll want to cast them onto 
something. Many scenes will have a ground or floor. Add 
one by creating a new 3D object using the 
‘PlaneBufferGeometry. Notice you also need to rotate the 
plane 90 degrees to the camera to lay flat, and we need 
to instruct it to ‘receiveShadow. 
//Create a ground plane 
var planeGeometry = new THREE. 
PlaneBufferGeometry( 500, 500, 32, 32 ); 
var planeMaterial = new THREE. 
MeshStandardMaterial( { color: Q@xeeaa33 } ); 
var plane = new THREE.Mesh( planeGeometry , 
planeMaterial ); 
plane. rotation. x=Math.PI/180«-9Q; 
plane.position. y=-6; 
plane.receiveShadow = true; 
scene.add( plane ); 


Create back wall 

Next, you will add a back wall to receive even more 
Shadows onto. This will show you the dynamics of 
real-time shadow rendering. Even with a more complex 
looking shape like the one you are using, shadows are 
cast accurately and smoothly. Add it like this: 

//Create a back wall 

var planeGeometry = new THREE. 

PlaneBufferGeometry( 500, 500, 32, 32 ); 

var planeMaterial = new THREE. 

MeshStandardMaterial( { color: Qxeeaa33 } ); 

var plane = new THREE.Mesh( planeGeometry, 

planeMaterial ); 

plane.position.z=-5Q; 

plane.receiveShadow = true; 

scene.add( plane ); 


Update renderer to use 

‘shadowMap’ 
In order to see the shadows, you must instruct the 
renderer to calculate and draw them. You do this by 
enabling the ‘shadowMap' property of the renderer. Also, 
to create softer, smoother shadows be sure to use the 
‘PCSoftShadowMap type: 

//update renderer to use shadowmap 

renderer. shadowMap.enabled = true; 

renderer. shadowMap. type = THREE. 

PCFSoftShadowMap ; 


Update object to cast shadow 
You have control over which objects will cast and receive 
Shadows in your scene. Shadows can be expensive in 
terms of processing costs. So always figure out the 
minimum lights you need to create your effect, and the 
minimum shadows needed. Turn on shadow casting for 
objects like this: 

object.castShadow = true; 


Tutorials 


Get started with Threejs - part 2 


Update lights to cast shadows 

Last, you need to set the ‘castShadow’ property for the 
spot lights and update some details. Near and far clipping 
planes should be set to avoid clipping in unintended 
places, and you can define the shadow map size for high 
resolution. Add these lines below each line you added to 
add a spot light. Re-run your scene and you will See really 
nice detailed lights and shadows! 

light.castShadow = true; 

light.shadow.mapSize.width = 2048; 

light.shadow.mapSize.height = 2048; 

light.shadow.camera.near = @.1; 

light.shadow.camera.far = 5QQ; 


Step 21 

Experimenting with light types, positions and tints allows 
you to create photo realistic or highly-stylised scenes 
quickly. 3D comes to life with well-lit scenes 


Lights in3D 


Three.js includes many lights 
you can use to light your scene. 
These include spot, directional, 
ambient, point and several 
other types. 
Ambient lights flooda 
scene with light, which you 
can also tint. It increases 
overall brightness and is great 
for increasing a scene’s light 
without adding more directional 
lights. Spot lights shine witha 
beam, much like a flashlight. 
You can see the circle of light on 
the receiving object if the beam 
radius is tight enough. 
Directional lights are like 
spots, except they have no 
circle. They cast evenly froma 
direction, much like how the sun 
lights the earth. Use directional 
light to emulate the sun. And 
point lights shine evenly in 
all directions from a specific 
position in 3D space. Think of 
these like a bare light bulb. 


Step18 

Adding a back wall with ‘receiveShadows’ set to 
true will reveal. | ating an 
interesting 
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lash is slowly being abandoned by Adobe 
in favour of HTML5 and JavaScript; its 
official end-of-life is set for the year 2020. 
And that’s where this article will come in 
handy. The tips described below aim to helo HTML5 
game developers in avoiding common mistakes when 
converting their Flash games to JavaScript, as well as 
making the whole development process go as smooth as 
possible. Fixing bugs and improving performance also 
translates to players soending more time in the game and 
thus on your site. All you need is basic knowledge about 
JavaScript, WebGL and the Phaser framework. 

With the rise of HTML5 usage, many companies start 
redoing their most popular titles to get rid of outdated 
Flash and match their products to the latest industry 
standards. This change is especially visible in the 
Gambling/Casino & Entertainment industries and has 
been happening for several years now, so a decent 
selection of titles has already been converted. 

Unfortunately, when browsing the internet, you can 
quite often stumble upon examples of a seemingly hasty 
job, which results in the lower quality of the final product. 
That's why it’s a good idea for game developers to 
dedicate some of their time for getting familiar with the 
Subject of Flash to HTML5 conversion, and learning 
which mistakes to avoid before getting down to work. 

Among the reason for choosing JavaScript, apart from 
the obvious technical issues, is also the fact that changing 
your game design from SWF to JavaScript can yield a 
better user experience, which in turn gives it a modern 
look. But how to do it? Do you need a dedicated 
JavaScript game converter to get rid of this outdated 
technology? Well, Flash to HTML5 conversion can be a 
piece of cake - here’s what our experienced JavaScript 
Game Developer has to say about the matter. 


1. Improving the HTML5 

game experience 

Converting a game to another platform is an excellent 

opportunity to improve it, fix its issues and increase the 

audience. Below are few things that can be easily done 

and are worth considering: 

e Supporting mobile devices 
Converting from Flash to JavaScript allows reaching a 
broader audience - users of mobile devices support 
for touchscreen controls usually needs to be 
implemented into the game. Luckily, both Android and 
iOS devices now also support WebGL, so 30 or 60 FPS 
rendering usually can be easily achieved. In many 
cases, 60 FPS won't cause any problems, which will 


only improve with time, as mobile devices become 
more and more performant. 

e Improving performance 
When it comes to comparing ActionScript and 
JavaScript, the latter is faster than the first one. Other 
than that, converting a game is a good occasion to 
revisit algorithms used in game code. With JavaScript 
game development you can optimise them or 
completely strip unused code that’s left by original 
developers. 

e Fixing bugs and making improvements 
to the gameplay 


Having new developers looking into game’s source 
code can help to fix known bugs or discover new and 
very rare ones. This would make playing the game less 
irritating for the players, which would make them 
spend more time on your site and encourage them to 
try your other games. 

e Adding web analytics 
In addition to tracking the traffic, web analytics 
can also be used to gather knowledge on how 
players behave in a game and where they get stuck 
during gameplay. 

e Adding localisation 
This would increase the audience and is important for 
kids from other countries playing your game. Or 
maybe your game is not in English and you want to 
support that language? 


2. Achieve 60 FPS 


When it comes to JavaScript game development, it may 
be tempting to leverage HTML and CSS for in-game 
buttons, widgets and other GU! elements. Our advice is to 
be careful here. It’s counterintuitive, but actually 
leveraging DOM elements is less performant on complex 
games and this gains more significance on mobile. If you 
want to achieve constant 60 FPS on all platforms, then 
resigning from HTML and CSS may be required. 

Non-interactive GUI elements, such as health bars, 
ammo bars or score counters can be easily implemented 
in Phaser by using regular images (the ‘Phaser.Image’ 
class), leveraging the crop’ property for trimming and the 
‘Phaser.Text’ class for simple text labels. 

Interactive elements such as buttons and checkboxes 
can be implemented by using the builtin ‘Phaser.Button’ 
class. Other, more complex elements can be composed 
of different simple types, like groups, images, buttons and 
text labels. 


3. Loading custom fonts 
If you want to render text with a custom vector font (eg 
TTF or OTF), then you need to ensure that the font has 
already been loaded by the browser before rendering 
any text. Phaser v2.6 doesn't provide a solution for this 
purpose, but another library can be used - Web Font 
Loader (https://github.com/typekit/webfontloader) 
Assuming that you have a font file and include the 
Web Font Loader in your page, then below is a simple 
example of how to load a font. Make a simple CSS file that 
will be loaded by Web Font Loader (you don’t need to 
include it in your HTML): 
@font-face { 
// This name you will use in JS 
font-family: ‘Gunplay’ ; 
// URL to the font file, can be relative 
or absolute 
src: url(‘../fonts/gunplay. ttf’) 
format(‘truetype’ ); 
font-weight: 400; 


Now define a global variable named 
WebFontConfig. Something as simple as this will 
usually suffice: 
var WebFontConfig = { 
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‘classes’: false, 
‘timeout’: Q, 
‘active’: function() { 
// The font has successfully loaded... 
ie 
‘custom’: { 
‘families’: L‘Gunplay’], 
// URL to the previously mentioned CSS 
‘urls’: [‘styles/fonts.css’ ] 
3 
3; 


Remember to put your code in the ‘active’ callback shown 
above. And that’s it! 


4. Save the game 
Now were in the middle point of our Flash to JavaScript 
conversion - it’s time to take care of the shaders. To 
persistently store local data in ActionScript you would use 
the ‘SharedObject’ class. In JavaScript, the simple 
replacement is the localStorage API (https://mzl. 
la/2n4WEjv), which allows storing strings for later retrieval, 
surviving page reloads. 
Saving cata is very simple: 

var progress = 15; 

localStorage.setItem( ‘myGame.progress’ , 

progress) ; 
Note that in the above example the ‘progress’ variable, 
which is a number, will be converted to a string. 
Loading is simple too, but remember that retrieved values 
will be strings or null if they don't exist. 

var progress = parseInt(localStorage. 
getItem(‘myGame.progress’)) || Q; 
Here were ensuring that the return value is a number. 
If it doesnt exist, then O will be assigned to the 
‘orogress variable. 

You can also store and retrieve more complex 

structures, for example, JSON: 

var stats = {‘goals’: 13, ‘wins’: 7, 
‘losses’: 3, ‘draws’: 1 
3; 
localStorage.setItem(‘myGame.stats’, JSON. 
stringify(stats)); 


var stats = JSON.parse(localStorage. 
getItem(‘myGame.stats’)) || {}; 
There are some cases when the ‘localStorage’ object 
won't be available. For example, when using the file:// 
protocol or when a page is loaded in a private window. 
You can use the ‘try and catch’ statement to ensure your 
code will both continue working and use default values, 
which is shown in the example below: 
try { 


var progress = localStorage. 


Be careful 


Each time you instantiate a ‘Phaser.Text’ or 
‘PIXI.Text’ object, a new texture is created to 


render text onto. This additional texture breaks 
vertex batching, so be careful not to have too 
many of them. 
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getItem(‘myGame. progress’ ); 
J Ss | } catch (exception) { 
// localStorage not available, use default 


values 
y . } 
Another thing to remember is that the stored data is 
Saved per domain, not per URL. So if there is a risk that 
many games are hosted on a single domain, then it’s 


better to use a prefix (namespace) when saving. In the 
example above, myGame. is a prefix and you usually 
want to replace it with the name of the game 

If your game is embedded in an iframe, then 
localStorage wont persist on iOS. In this case, you would 
need to store cata in the parent iframe instead. 


Default fragment shader 
When Phaser and PixiJS render your sprites, they use a 
simple internal fragment shader. It doesn't have many 
features because it’s tailored for soeed. However, you can 
replace that shader for your purposes. For example, you 
can leverage it to inspect overdraw or support more 
features for rendering. Below is an example of how to 


Supply your own default fragment shader to Phaser v2 
function preload() { 
this. load. shader ( ‘filename. frag’ , 
‘shaders/filename. frag’ ) ; 
J 
function create() { 
var renderer = this.renderer; 
var batch = renderer.spriteBatch; 
batch.defaultShader = 
new PIXI.AbstractFilter(this. cache. 
getShader ( ‘filename. frag’ )); 
batch. setContext(renderer.gl); 
J 


Change tinting method 
A custom default shader can be used to replace default 
tinting methods in Phaser and PixiJS. Tinting in Phaser 
and PixiJS works by multiplying texture pixels by a given 
colour. Multiplication always darkens colours, which 
obviously is not a problem; it’s simply different from the 
Flash tinting. For one of our games we needed to 
implement tinting similar to Flash and decided that a 
custom default shader could be used. Below is an 
example of such a fragment shader. 

// Specific tint variant, similar to the 

Flash tinting that adds 

// to the color and does not multiply. A 

negative of a color 

// must be supplied for this shader to work 
HEA mq Poe : | properly, i.e. set 
// sprite.tint to @ to turn whole sprite to 
white. 
precision lowp float; 


varying vec2 vlextureCoord; 


Sel : | 
@ |_ menu ) —— : varying vec4 vColor; 


uniform sampler2D uSampler; 


Top Middle Bottom void main(void) { 

A custom default shader can be The picture on the left shows how a The left part of the image is a scene 

used to replace the tinting player sees the game, while the one on from a game, while the right side shows vec4 f = texturezD(usampler, 

method in Phaser and PixiJS. The the right displays the effect of applying the same scene with the Phaser physics vTextureCoord) ; 

tanks flash white when hit the overdraw shader to the same scene debug overlay displayed on top float a = clamp(vColor.a, @.00001, 1.0); 
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gl_FragColor.rgb = f.rgb * vColor.a + 
clamp(1.@ - vColor.rgb/a, 0.0, 1.0) x 
vColor.a * f.a; 

gl_FragColor.a = f.a * vColor.a; 

} 
This shader lightens pixels by adding a base colour to the 
tint one. For this to work, you need to supply negatives of 
the colour you want. Therefore, in order to get white, you 
need to set: 
sprite.tint = 0x0000Q00; 
sprite to white 
Sprite.tint = Ox0OfffFf; 


// This colors the 


// This gives red 


7. Inspect overdraw 

Replacing a default shader can also be leveraged to help 
with debugging. Below we've explained how overdraw 
can be detected with such a shader. 

Overdrawing happens when many or all pixels on the 
screen are rendered multiple times. For example, many 
objects taking the same place and being rendered one 
over another. How many pixels a GPU can render per 
second is described as fill rate. Modern desktop GPUs 
have excessive fill rate for usual 2D purposes, but mobile 
ones are a lot slower. 

There is a simple method of finding out how many 
times each pixel on the screen is written by replacing the 
default global fragment shader in PixiJS and Phaser with 
this one: 

void main(void) { 

gl_FragColor.rgb += 1.0 / 7.0; 

3 
This shader lightens pixels that are being processed. 
The number ZO indicates how many writes are needed 
to turn pixels white; you can tune this number to your 
liking. In other words, lighter pixels on screen were written 
several times, and white pixels were written at least 
seven times. 

This shader also helps to find both ‘invisible’ objects 
that for some reason are still rendered, and sprites that 
have excessive transparent areas around that need to be 
Stripped (GPU still needs to process transparent pixels in 
your textures). 


8. Why physics engines 

are your friends 

A physics engine is a middleware that’s responsible for 
Simulating physics bodies (usually rigid body dynamics) 
and their collisions. Physics engines simulate 2D or 3D 


Spaces, but not both. A typical physics engine will provide: 


¢ Object movement by setting velocities, accelerations, 
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Want to learn more? 


In this article, we have focused mainly on 
Phaser v2. However, a newer version of 
Phaser is now available. This is also worth 
checking out. It introduced a plethora of 
features, such as multiple cameras, scenes, 
tilemaps and the Matter.js physics engine. 
If you are brave enough and want to create 
truly remarkable things in browsers, then 
WebGL is the right thing to learn from the 
ground up. It’s a lower level of abstraction 
than various game-building frameworks or 


joints, and motors; 
¢« Detecting collisions between various shape types; 
¢ Calculating collision responses, ie how two objects 

should react when they collide. 

There is a Phaser plugin that works well for this purpose. 
Box2D is alSo used in the Unity game engine and 
GameMaker Studio 2. 

While a physics engine will Soeed up your 
development, there is a price you'll have to pay: reduced 
runtime performance. Detecting collisions and calculating 
responses is a CPU-intensive task. You may be limited to 
several dozen dynamic objects in a scene on mobile 
phones or face degraded performance, as well as 
reduced frame rate deep below 60 FPS. 


9. Export sounds 
If you have a Flash game sound effects inside of a fla file, 
then exporting them from GUI is not possible (at least not 
in Adobe Animate CC 2017) due to the lack of menu 
options serving this purpose. But there is another solution 
- a dedicated script that does just that: 

function normalizeFilename(name) { 

// Converts a camelCase name to snake_ 
case name 
return name.replace(/(LA-Z])/g, ‘_$1’). 

replace(/*_/, ‘’).toLowerCase(); 
3 
function displayPath(path) { 

// Makes the file path more readable 

return unescape(path).replace(‘file:///’ , 
‘*?).replace(‘|’, ‘:’); 
I 
f1.outputPanel.clear() ; 
if (fl.getDocumentDOM().library. 
getSelectedItems().length > @) 

// Get only selected items 

var library = f1.getDocumentDOM(). library. 
getSelectedItems() ; 
else 

// Get all items 

var library = f1.getDocumentDOM(). library. 
items; 
// Ask user for the export destination 
directory 
var root = fl.browseForFolderURL( ‘Select a 
folder.’); 
var errors = Q; 
for (var i = 0; 1 < library.length; i++) { 

var item = libraryLlil]; 


if (item.itemType !== ‘sound’) 


tools, but it allows you to achieve greater 
performance and quality even if you work 
on 2D games or demos. Among the websites 
you may find useful when learning the basics 
of WebGL is WebGL Fundamentals (https:// 
webglfundamentals.org), which uses 
interactive demos. In addition to that, to find 
out more about WebGL feature adoption 
rates check WebGL Stats (http://webglstats. 
com). And remember, there’s no such thing as 
too much knowledge. 


continue; 

var path = root + ‘/’; 

if (item.originalCompressionType === 
‘RAW’ ) 

path += normalizeFilename(item.name. 
split(‘.’)[@]) + ‘.wav’; 

else 

path += normalizeFilename(item.name) ; 

var success = item.exportToFile(path) ; 

if (!success) 

errors += 1; 

fl.trace(displayPath(path) + ‘: ‘ + 


(success ? ‘OK’ ‘Error’)); 


3 
fl.trace(errors + ‘ error(s)’); 
How to use the script to export sound files: 
]. Save the code above as a jsfl file on your computer. 
2. Open a fla file with Adobe Animate. 
3. Select Commands>Run Command from the top menu 
and select the script in the dialogue that opens. 
4. Now another dialogue file pops Up for selecting the 
export destination directory. 
And done! You should now have WAV files in the specified 
directory. What’s left to do is convert them to, for example, 
MP3, OGG or AAC. 


10. How to use MP3s 


The good old MP3 format is back, as some patents have 

expired and now every browser can decode and play 

MP3s. This makes development a bit easier, since finally 

there's no need to prepare two separate audio formats. 

Previously you needed, for instance, OGG and AAC files, 

while now MP3 will suffice. 
Nonetheless, there are two important things you need 

to remember about MP3: 

¢ MP3s need to decode after loading, which can be 
time-consuming, especially on mobile devices. lf you 
see a pause after all your assets have loaded, then it 
probably means that MP3s are being decoded; 

¢ gaplessly playing looped MP3s is a little problematic. 
The solution is to use mp3loop, read more in this article 
posted by Compu Phase (https://bit.ly/2KKCEyH). 


Complex shaders 


It’s important to remember that the default 
shader is used for all sprites, as well as when 


rendering to a texture. Also, keep in mind that 
using complex shaders for all in-game sprites will 
greatly reduce rendering performance. 


tutorial 61 


a eae 


Learn how to create and bt 


3D with the Jeeliz 


OWNLOAD TUTORIAL FILES 
ww.filesilo.co.uk/webdesigner 


=U 


«i 


620 tutorial 


ugmented Reality (AR) is hitting social 
media, creating all kinds of photo 
opportunities - and web designers 
don't have to miss out on the action. 
The fantastic Jeeliz FaceFilter API (jeeliz.com) is a 


library that sits over a slightly modified version of ThreeJS 
to enable full 3D head tracking in the browser. Because 
Jeeliz FaceFilter uses WebRTC you will need to serve it 
over a secure HT TPS server to your devices. The library 
detects faces and works out the three-dimensional 
transformation and uses the ThreeJS library to load and 
display 3D models over the top. This means that you can 
display any 3D model, tracked onto the face position. 

In this tutorial, we're going to create a promotional web 
site that could be used to generate interest ina 
forthcoming event. In this particular case, it’s going to be 
for a special Viking Museum exhibition. It shouldn't take 
much effort to enable users to save their image, and this 
could help generate a lot of great publicity. 

You could easily adapt this technique for many 
different use cases — imagine using it to create a great 
web-based application for a band on tour, for example, 
where the members of that band have distinctive 
hairstyles or hats (Slash from Guns N’ Roses springs to 
mind). The possibilities this technique affords are only 
limited by your imagination — and the content works 
equally well across smartphones, tablets and computers 
using modern web browsers. 


1. Starting the project 
From the Project Files folder, open the Start folder in your 
code IDE. Open up the ‘index.html’ page to begin the 
process. In the head section add in the script tags to link 
up all the libraries needed. Jeeliz will detect faces, there is 
a modified version of ThreeJS and the library to load 
Collada models. The ‘scene js’ is where our code will go 
later and there is some CSS, too. 

<script type=”text/javascript” src="js/ 

jeelizFaceFilter.js”></script> 

<script type=”text/javascript” src="js/ 

threeModified.js”></script> 

<script type=”text/javascript” src="js/ 
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ColladaLoader.js”></script> 

<script type=”text/javascript” src=”scene. 
js”></script> 

<link rel=”’stylesheet” href=”’css/style.css”> 


2. Adding the body content 


Below the head section of the page add the content for 
the body section. As you can see there is an onload event 
which will call the ‘main’ function in the JavaScript. The 
‘div structure places some overlays on top of the ‘canvas’ 
element where the face detection will be added. 
<body onload=”main()” style=’color: white’> 
<canvas width=”600” height=”600” 
id=’ jeeFaceFilterCanvas’></canvas> 
<div id=”’viking”> 
<div id=”preload”> 
<img src=”img/preload.gif”> 
<br>Loading Please Wait 
</div> 


3. Finishing the body 


Now there is just some final content added to the bottom 
of the page that gives the context of what this page is all 
about, and how the face detection fits in with the theme. 
This is for an imaginary exhibition that might need some 
interesting promotion to get visitors. 
<div id=”imageWrap”><img src=”img/vikings. 
png” id=”’vikingImg” alt=”The Vikings Are 
Coming! A major UK travelling museum tour, 
check press for details”></div> 
</div> 


4. Moving to the CSS 


Now all the content code is added into the HTML, save 
the page and open ‘styles.css from the CSS folder. Here 
the basic styling of the page and the canvas will be added 
so that the canvas element will fill the full screen of the 
browser on the page. 
body { 

overflow: auto; 

overflow-y: auto; 

margin: @px; } 


Layout: "Startup 
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#jeeFaceFilterCanvas { 
z-index: 10; 
position: absolute; 
width: 100%; 
height: 100%; 
top: Q@px; 
left: Q@px; } 


5. Multiple backgrounds 
The Viking element is a container that will be placed over 
the top. In this will be the preloader and page design. 
Here the images are added as multiple background 
elements. A decorative strip is placed along the top and 
bottom to theme the page and then a gradient image 
added just to make it a little darker at the bottom. 
#viking { 
width: 100%; 
height: 100%; 
position: absolute; 
top: Q; 
left: Q; 
z-index: 200; 
background: url(../img/braid.png) center 
top repeat-x, url(../img/braid.png) center 
bottom repeat-x, url(../img/base.png) center 
bottom repeat-x; } 


6. Preloading the content 
While all the libraries, 3D models and images are loading, 
a screen will be placed over the top to tell people what is 
happening. You can see that this is positioned into place 
at a higher ‘z-index’ and the typography is set. It’s 
positioned in the centre of the screen. 
#preload { 

height: 36Qpx; 


Model formats 


There are a wide variety of different model 
formats that can be loaded through Three.JS, 
check out threejs.org/examples/ to see if there 
is a preferential format for your content. 


Left 

To continue the 3D theme of the 
project the graphics have been created 
in Cinema4D and rendered out as a 
transparent PNG for use on the web 


Top 

The DIV element that sits over the top 
of the canvas has the background 
pattern, shown here, repeated at the 
top and bottom of the page 


tutorial 63 


Tutorials 


Code 3D interactive models with WebGL 


width: 100%; 

margin: auto; 

position: absolute; 

top: 50%; 

color: #999; 

font-family: “HelveticaNeue-Light” , 
“Helvetica Neue Light”, “Helvetica Neue”, 
Helvetica, Arial, “Lucida Grande”, sans- 
serif; 

font-weight: 300; 

transform: translateY(-50%) ; 

font-size: 2em; 

text-align: center; 

z-index: 20Q; 
J 


7. Positioning at the bottom 


In order to get the position of the title at the bottom of the 


page it’s placed inside a relatively positioned DIV. This is 
given the full height of the page and the image is placed 
inside, giving a little room for it to sit above the bottom of 
the browser window. Save the CSS and check everything 
is working in the browser. 
#imageWrap { 
width: 100%; 
max-width: 5QQpx; 
height: 100%; 
position: relative; 
margin: @ auto; 
; 
#vikingImg { 
width: 100%; 
max-width: 5Q@Q@px; 
position: absolute; 
bottom: 1px; 


Placing the model 


It’s easy to forget, but the 3D model of the helmet is 
not being placed around the head, it’s being placed 
in front of the face video image and transformed to 
match the angle of the face. 


Top 

At this point all of the HTML and CSS are in place so you 
should see the preloader holding screen, this will be 
removed in the JavaScript once the page has loaded 


Right 

This is one of the six images that make up the cube map 
which is the environment that creates the reflection on the 
helmet, making it shiny 
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8. Setting up the JavaScript 
Move to the ‘scene js’ file now and you will see that there 
is already some code set up in here for the main function. 
All the new code will be added above what is here. The 
first part of this is to ensure that all the settings are 
correct, this is probably what will change the most when 
you add your own content. This sets the model file and 
the folder with the cube map. 
var SETTINGS = { 

daeModelURL: ‘model/helmet.dae’ , 

cubeMapURL: ‘scene/’ , 

rotationOffsetX: -@.1, 

cameraFOV: 40, 

pivotOffsetYZ: [0.3, 0.3], 

detectionThreshold: @.3, 

detectionHysteresis: @.@5, 

offsetYZ: [0.68, @], 

scale: 2.9 


ie 


9. Detecting faces 
Now there are some global variables for the project to 
work that will be used across multiple functions. Then 
the face detection function runs and sets the 
“THREEFACEOBJ3D variable to ‘true’ or ‘false’ if the 
face is detected. This will be used later on to place the 
3D object on to the face. 
var THREEVIDEOTEXTURE, THREERENDERER, 
THREEFACEOBJ3D, THREEFACEOBJ3DPIVOTED, 
THREESCENE, THREECAMERA, CANVASELEMENT ; 
var ISDETECTED = false; 
function detect_callback(isDetected) { 
if (isDetected) { 
THREEFACEOBJ3D. visible = true; 
console. log( ‘INFO in detect_ 
callback() : DETECTED’); 
} else { 
THREEFACEOBJ3D. visible = false; 
console. log( ‘INFO in detect_ 
callback() : LOST’); 
} 
} 
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10. Setting up the scene 
The scene is set up in the ‘init’ function, so all elements 
pertaining to that are added here. A renderer is set to 
WebGL mode and some empty objects are created. 
‘frustrumCulled’ simply refers to detecting whether these 
elements are in the camera’s view port or not 
function init_threeScene(spec) { 
CANVASELEMENT = spec.canvasElement; 
THREERENDERER = new THREE.WebGLRenderer ({ 
context: spec.GL, 
canvas: CANVASELEMENT 
3 
THREEFACEOBJ3D = new THREE.Object3D(); 
THREEFACEOBJ3D.frustumCulled = false; 
THREEFACEOBJ3DPIVOTED = new THREE. 
Object3D() ;sx 
THREEFACEOBJ3DPIVOTED. frustumCulled = 
false; 


11. Pivoting 
The pivot point of the object is set based on the 
settings in Step 8. This just positions the pivot point 
Slightly differently to match where the neck and head 
of the person intersect rather than the model's own 
pivot point. The path of the cube map is set and these 
are all JPG images. 
THREEFACEOBJ3DPIVOTED.position.set(Q, 
-SETTINGS. pivotOffsetYZLQ], -SETTINGS. 
pivotOffsetYZ[1]); 
THREEFACEOBJ3D. add (THREEFACEOBJ3DPIVOTED) ; 
var path = SETTINGS.cubeMapURL ; 
var format = ‘.jpg’; 


12. Loading the cube map 
The cube map gives the helmet its shiny reflective image. 
Here each of the six images necessary to form a cube are 
loaded and stored in the variable ‘envMap. These will be 
added to the model when it loads as the reflection or 
‘environment, hence the name ‘envMap.’ 

var envMap = new THREE.CubeTextureLoader(). 

load(L 

path + ‘posx’ + format, path + ‘negx’ + 
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Seeing the right geometry 
When you are creating your 3D content 
for use with head tracking, you will want 
to make sure that you do not create 
double-sided objects. The way models 
work in 3D is that they have one side 
which is ‘seen’ by the renderer — this is 
known as the ‘normal’. Even if your 3D 
modelling package shows both sides, 
you will only see one when you export 


should be visible if you turn your head 
but not on the inside as this would 
obscure the face. Your modelling 
package should allow you to see the 
normal side. 

In the image (left), they are shown as 
yellow polygons so that you know the 
outside is visible, if it isn’t then there will 
be an option to ‘reverse normals’ and if 


format, 


path + ‘posy’ + format, path + ‘negy’ + 
format, 

path + ‘posz’ + format, path + ‘negz’ + 
format 


1); 


13. Loading the model 
The model is now being loaded into the code. You will see 
that once the model has been loaded, the environment 
map is added to all the materials in the scene. The model 
is added to an empty box in order to set the positioning 
to match the position of the head. 
var loader = new THREE.ColladaLoader (); 
loader. load(SETTINGS.daeModelURL, function 
(collada) { 
collada.scene.traverse(function (child) { 
if (child.isMesh) { 
child.material.envMap = envMap; } 
iD} 
collada.scene.frustumCulled = false; 
var bbox = new THREE.Box3(). 
expandByObject (collada. scene) ; 
var centerBBox = bbox.getCenter(new THREE. 
Vector3()); 


14. Repositioning the object 
The model is repositioned to the settings offset from Step 
8. The scene is also scaled to fit. If you want to customise 
this with your own model, then the scale variable in the 
settings will be the place, which you will need to change 
the size of the object so that it fits on to the head. 
collada.scene.position.add(centerBBox. 
multiplyScalar(-1)); 
collada.scene.position.add(new THREE. 
Vector3(@, SETTINGS.offsetYZ[@], SETTINGS. 
offsetYZ[1])); 
var sizeX = bbox.getSize(new THREE. 
Vector3()).x; 
collada.scene.scale. 
multiplyScalar(SETTINGS.scale / sizeX); 
THREEFACEOBJ3DPIVOTED. add(collada. scene) ; 
15 


15. Setting up the video 

The 3D scene is created and the model is added into this 
scene. The video needs to run in the background of the 
scene. To do this the video is taken from the webcam and 
is turned into a texture that can be placed on to a quad 
mesh to fill the screen. It requires a lot of code. 


it. For making a helmet model this is 
important. The back of the helmet 


THREESCENE = new THREE. Scene(); 
THREESCENE . add (THREEFACEOBJ3D) ; 
THREEVIDEOTEXTURE = new THREE. 
DataTexture(new Uint8Array(L255, @, @]), 1, 
1, THREE.RGBFormat) ; 
THREEVIDEOTEXTURE.needsUpdate = true; 

var videoMaterial = new THREE. 
RawShaderMaterial ({ 

depthWrite: false, 

depthTest: false, 


16. Making a shader 


A shader is a program that runs on the graphics card, 
very fast. Because all the pixels are calculated at once, or 
in parallel, it’s written in a language similar to ‘C. A vertex 
Shader can change the shape of objects, but it isn’t doing 
so here; it’s just mirroring the webcam image. 
vertexShader: “attribute vec2 position; \n\ 
varying vec2 vUV;\n\ 
void main(void){\n\ 
gl_Position=vec4(position, @., 1.);\n\ 
VUV=@.5+vec2(-0.5,0.5)*position; 
//inverse X axis for mirror\n\  }”, 


17. Shading fragments 
Now the fragment shader is written and can be thought 
of as writing all the pixels inside the shape of an object or 
between the geometry. As such this is again written in the 
‘C-like language. This adds the video image into the 
‘videoMaterial’ variable for use later. 

fragmentShader: “precision lowp float; \n\ 

uniform sampler2D samplerVideo;\n\ 

varying vec2 vUV;\n\ 

void main(void){\n\ 

gl_FragColor=texture2D(samplerVideo, 

vVUV) ; \n\ “ 


18. Pressing the uniform 
A ‘uniform is a consistent input into the shader program, 
In this case it is the video texture from the webcam since 
this is what needs to be processed and spat out onto the 
background of the scene. This will be placed on to 
geometry in the following step. All Three. JS objects 
consist of ageometry and a material. 

uniforms: { 

samplerVideo: { 

value: THREEVIDEOTEXTURE } } }); 


19. Creating the video geometry 


The video geometry is created and it is set to be 


only some are facing the wrong way then 
you can ‘align normals first. 


positioned into the screen corners so that it fills the 
screen. The video object is created out of the geometry 
and the material so that it is a visible object in the scene. A 
new function is created at the end of this code. 
var videoGeometry = new THREE. 
BufferGeometry() 
var videoScreenCorners = new 
Float32Array([-1, -1, 1, -1,. 1, 1, <1, 1)); 
videoGeometry.addAttribute( ‘position’, new 
THREE .BufferAttribute(videoScreenCorners, 
2)); 
videoGeometry.setIndex (new THREE. 
BufferAttribute(new Uintl6Array([@, 1, 2, Q, 
2, 31), 1))5 
var videoMesh = new THREE. 
Mesh(videoGeometry, videoMaterial); 
videoMesh. onAfterRender = function () { 


20. Updating the texture 
The texture is told that it is updated every single frame 
— most textures don't do this as they are just mapped 
onto the object, but being a video it needs to change. 
Some filtering is done to smooth the edges of the pixels 
out and make it appear better, since the webcam image 
is being scaled up considerably. 
THREERENDERER. properties. 
update (THREEVIDEOTEXTURE , 
spec. videoTexture) ; 
THREEVIDEOTEXTURE.magFilter = THREE. 
LinearFilter; 
THREEVIDEOTEXTURE.minFilter = THREE. 
LinearFilter; 
delete(videoMesh. onAfterRender) ; ae 


‘__webg1Texture’ , 


21. Finishing up 
The webcam video object is placed at the front of the 
render queue so that it is rendered first, then the mode 
will be placed over the top when a head is detected in the 
screen. A perspective camera is added to the scene to 
match the camera from the webcam. Finally, the 
preloader is turned off so that this screen is visible. 
videoMesh.renderOrder = -100Q; 
videoMesh.frustumCulled = false; 

THREESCENE . add(videoMesh) ; 

THREECAMERA = new THREE. 
PerspectiveCamera(SETTINGS.cameraFOV, 1, 
Q.1, 100); 

set_fullScreen() ; 

document. getElementById(“preload”).style. 
visibility = ‘hidden’; } 
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Animated background GDPR notification Sub navigation items 
Full-screen navigation is complemented This is a smart approach to Asecondary navigation is presented 
by a video background that helps to presenting the data privacy with a smaller font size, allowing 
increase the visual appeal of the notification for GDPR compliance lesser visibility for options that aren’t 
webpage presentation. without being too intrusive. the main focus. 


PD Series 


. 


. J 


VW Read our policy Accept cookies 


Main navigation iy a a en, | fon, —.. : Link containers 
The main navigation options are , , Each navigation link uses spacing 
presented with a font size that clearly = - — - 4. 4 —— —t___ a: ~-____4__ to clearly separate themselves 
stands out from the background and from other items. It’s also used as 
any other page content. part of the intro animation. 


Se s —— wo 


Create a large fade-in content navigation 


§S DOWNLOAD TUTORIAL FILES wwwFilesilo.co.uk/webdesigner 


A tool for simplification 
Increasing complexity of web content and its associated functionality requires 
presentation to allow people to easily make sense of what's being presented. 


<comment> | Navigation is a tool that allows people to avoid irrelevant content and 


What our 


experts think | [UNctionality so that they can more easily understand what's relevant. 
of the site | Leon Brown, developer and author of e-learning content at nextpoint.co.uk 


Technique 
1. Initiate HTML document 


The first step is to define the structure of the HTML 
document that becomes the webpage. This consists of a 
HTML container for the head and body sections. The 
head section references to the external CSS and 
JavaScript resources, while the body section stores the 
page content created in step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Fade In Navigation</title> 

<link rel=’stylesheet” type="text/css” 

media=”screen” href=’styles.css”/> 

<script src=”code.js” type=”text/ 

javascript”></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Page content 
The webpage content consists of a navigation 
container that stores a collection of links. For the fade in 
effect to be possible, the text inside the links need to be 
presented as a child element - hence the use of span 
tags. This allows CSS to control the text independently of 
their link container. 

<nav> 

<a href=”"#><span>One</span></a> 

<a href=”#’><span>Two<span></a> 

<a href=”"#’><span>Three</span></a> 

<a href=”"#’><span>Four</span></a> 

</nav> 


3. CSS navigation 
With the HTML now complete, create a new file called 
‘styles.css. Each link inside the navigation needs to have a 
default colour and padding to show spacing. Hidden 
overflow is also applied so that the span text can appear 
out of view. 

nav af{ 

display: block; 

padding: lem; 

color: #000; 

font-size: 3em; 

text-decoration: none; 

overflow: hidden; 

background: transparent; 

text-align: center; } 


4. Navigation extras 
The remaining settings for the navigation require a 
border to appear on link items when they are hovered. 
Additionally, soan items inside the links need to have a 
negative top margin that moves them out of view from 
the link container. The ‘menuOpen’ animation is applied 
to occur Over one second 

nav a:hover{ 

border: .Q1cm solid #000 

3 

nav > a > span{ 

display: block; 

margin-top: -2em; 

animation: menuOpen 1s forwards; 


I 


5. Animation definition 
The ‘menuOpen animation referenced in the previous 
step uses just one frame. By using ‘to, keyframes will 
instruct the browser to animate items from step 4 
towards having a top margin value of zero. With links 
using a hidden overflow, this results in the menu link text 
appearing into view. 

@keyframes menuOpen { 

to{ margin-top: @; } 

} 


6. Animation delays 
The CSS applies the animation for all link text to start at 
the same time. A unique delay is required for each text 
item to appear animated afterwards. JavaScript is used to 
find each navigation span and calculate their 
‘animationDelay’ based on their index position. 
window. addEventListener(“load”, function(){ 
var nodes = document.querySelectorAll(“nav > 
a > span’); 
for(var i=@; i<nodes.length; i++){ 
nodes[i].style.animationDelay = (i/2)+’s”; 
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Oo TREAMLINE YOUR 


DESIG 


WORKFLO 


A design process is a method of 
steps to ensure you and your 
team create great products. 
Take a look at the tools and 
techniques used by the pros 
on a daily basis 
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CREATE A WIREFRAM 


Design workflow 


Understanding the fundamental 
components and layout is essential 
any design and everyone involved. 


i ri i i red 


Hi hi 1 4 \ \ 
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E IN SKETCH 


Strip back your design and present only the fundamental components 


To some, a wireframe may seem 
like a laborious and unnecessary 
task that can drag out a project 
with no real long-term benefit. 
Jumping straight into a design 
may seem like a compelling and 
rewarding alternative, but by doing 
so you could be forgetting the 
most important thing of all when 
creating a design: the user! 

The ideation and wireframing 
stage of any design enables you 
to consider the layout and user 
experience from the very start of 
your project. By only using the 
core components for your web 
design — header, footer, 
navigation, buttons — to begin 
with, you can always ensure your 
focus is on the user, without 
getting distracted by which colour 
palette you had in mind. 

There are plenty of tools out 
there to get started with 
wireframing, but today many web 
teams use Sketch. Its usability and 
unrivalled speed make it the 
obvious choice. 

So a project has been set up, 
and a font has been chosen for the 
wireframe, but what should be 
added? This is where the core 
components are decided and 
added to the wireframe — the 


components that the design can't 
live without. 

Starting with the header, what 
do we need if we are approaching 
this project mobile first? Is the 
logo the main focus? Should we 
consider using a ‘burger’ 
navigation to ensure best practice? 
These are the questions any 
designer should keep asking 
themselves throughout the 


ymbols act 
as a super 
component 


process when building their 
wireframe components. 

The first steps should be to 
create an artboard for mobile or 
desktop, and begin to build the 
components on the page with 
simple shapes, in order to define 
the outline of the components, like 
the header. To highlight areas of 
importance and interactivity in the 
wireframe, use varying shades of a 


monochrome colour palette whilst 
wireframing. For example, within 
the header, inserting a logo and 
navigation in a bold blue colour, on 
a pastel blue background, will 
present them as the important 
elements in your component. 

It’s also important to consider a 
grid system, padding and margins 
as soon as possible when defining 
the wireframes. Showing rulers in 
a Sketch file (Ctrl+R) and clicking 
on these rulers (down the left and 
above your artboard) will create 
guides, which in turn saves a lot of 
stress when sharing designs, as 
consistency is key when defining 
a design system. 

When the essentials are in place 
for one component, move onto the 
next. Only include what you need. 
Keep in mind the bare minimum 
that is needed for the user to 
complete their task! Planning to 
use these components in more 
than one artboard? Why not create 
a symbol. Symbols act as super- 
components that update all the 
artboards they currently sit in. To 
create a component, right-click an 
element, and choose ‘Create 
symbol’. This will be saved into one 
packaged item manageable from 


the symbols page. 
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Design workflow 


3 important 
wireframe 


techniques 
in Sketch 


1. Define your guides 


Every design, unfortunately, 
needs rules from time to time, 
make sure you add guides by 
going to View > Canvas > 
Show Rulers or hit Ctrl+R. 
Don't have any guides? Add 
some by clicking on the rulers, 
and then make sure that they 
are consistent. 


2. Create symbols 
Symbols are by far the best 


feature in Sketch. Right-click 
on any of your assets and 
then click ‘Symbol’ to create 

a universal asset that updates 
across all your artboards 
when changed. 


3. Use a monochrome 
colour system 

Too many colours can be 
distracting, so minimise your 
colour palette to clearly define 
important elements in your 
wireframes. Highlighting the 
important stuff (call-to-action 
buttons, header text) with 
bolder colours is a subtle yet 
effective way of creating a 
visual hierarchy when sharing 
the designs with colleagues 
and clients. 
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PROTOTYPING IN SKETCH isisiinetnese simpie steps 


eee * design_workflow.sketch 
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3 great ways to improve your Sketch prototypes 


1. Animations it's expected the list will grow in every time the prototype is 
Underneath the target area on future updates of Sketch with opened, this art6oard will be the 
the right-hand panel there is the options like fading transitions, first page. This will also set the 
option to add animations for example. homepage’ when sharing the 
between your artboards. prototype in the cloud. 


Using animations is a great 2. Flag your starter page 
way to add more life to your When previewing a prototype, 3. Quick tip — link colours 


prototype. However, the current the flag icon that sits in the It’s worth noting that it’s possible 
options are more tailored towards | header of the popup next to the to update the link colours in your 
app prototypes, and don't offer select dropdown is a great way to | Sketch preferences, just in case 
much flexibility if demonstrating indicate which of the artboardsis | there is a colour clash in a design 
a website design. That being said, | the home page. Once selected, with the default orange. 
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COLLABORATING IN SKETCH 


Share, collaborate and comment on the designs using the Sketch Cloud feature 


Sketch Cloud explained 

Sketch’s latest cloud feature is an 
online showcase of all pages and 
artboards in one place. Anyone 
can sign up to use Sketch Cloud to 
view, download, and comment on 
Sketch files, which have been 
shared publicly or privately 
straight from Sketch. 

Pages act as sections on your 
Sketch Cloud link and are 
displayed in order of their 
structure in Sketch (from top to 
bottom). Artboards within these 
pages do the same, so make sure 
the structure is correct (for 
artboards, order from left to right) 
to show designs in a specific order. 

It’s worth noting that this is also 
a great platform to perform some 
user testing once you've shared 
your cloud link. 


How to use it 

Sketch have outdone themselves 
with the free sharing and cloud 
feature. When the prototype is 
complete, click on the Cloud icon, 
sign up with an account, and 
upload the designs to the cloud. 


@ 
Wireframes 


About us 
Case Studies 


Blog 


Contact us 


Navigation 


Symbols 


From this point onwards, the link 
will remain the same, so any future 
amends added to the project will 
be uploaded when clicking on the 
cloud icon and selecting Update 

in the share popup. 

The dashboard on the cloud is 
self-explanatory with prototypes, 
artboards and symbols available 
to view in order. 


Prototypes 

If you viewed 
your prototype in 
your Sketch file 
earlier, and 
flagged one of 
your pages as 
the starting 
page, Sketch 
cloud will create 
a new section 
with this 
prototype ready to go! 

Can't see a prototype? Simply go 
back to your Sketch file, highlight 
the artboard you want to be the 
starting page, click Preview so you 
see the popup, and finally click the 
flag icon. On your next push to the 


Share your 
prototype via URL 
To share a direct link to your 
prototype without the user 
having to navigate in Sketch 
cloud, adding ‘play’ or grabbing 
the URL in prototype mode and 


cloud, this prototype will be 
Waiting for you! 


Comments and Sharing 
All users with access can leave 
comments on each artboard, 
enabling all feedback to be kept in 
one place, so there's no need for 
that long-winded email anymore. 
If you are 
looking to get 
feedback on 
your prototype 
or designs, or 
want to share the 
prototype ona 
public link, click 
on the cog icon 
in the top-right 
corner of your 


Here, you can 
enable 
comments (which will appear once 
viewing a design by clicking the 
bottom-right icon), and create a 
public link for your designs for 
sharing. You can keep the designs 
private, and give access via email 
to a lucky few. 


@ design_workflow 


Home page Blog 


Blog - Article 


cloud dashboard. 
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Essential 
shortcuts 


¢ S & & im) 


btotyping Link Preview Clrud View 


sketch cloud/s/xKdrm a 


q 


New Upload Update Document 


Pushing to cloud 


Push your latest changes to 
cloud by selecting this icon 
— your browser will open the 
link once completed. 


Hide your symbols 


Declutter your Sketch cloud 
link by selecting only the page 
you want to show in the top 
left dropdown, and share the 
URL from here instead. 


© Use as Library 


Cancel Save Changes 


audience in the loop 
In the settings panel popup, 


tick ‘Use as library’ to 
automatically let your team 
know there’s been a change. 


Show your 

prototypes first 

Flag your opening artboard in 
preview mode before pushing 
to cloud to make it appear first 
on your Sketch cloud link. 
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BUILD A DESIGN SYSTEM IN SKETCH 


Generate a coherent user experience by building a design system 
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1. Define your 
colour palette 
Keep your brand 


colours organised in 


your document palette 
by choosing the said 
colour and clicking 

the ‘+’ icon. 


2.Nested symbols 
Keep your favourite 
symbols organised in 
their multiple states by 
using slashes when 
naming your symbols, 
for example naming 
your symbols ‘Button / 
Active’ and ‘Button / 
Disabled’ will group your 
symbols together under 
the same category. It’s 
that easy! 


3.Create a design 
system page 
Separating all your 
elements that define 
your brand into its own 
page in Sketchisa 
simple way to show 
everyone where they 
can grab the assets. 


4.Symbol overrides 
You can overwrite the 
content in your symbols, 
such as text in your 
button (see example), so 
you don't need to worry 
about making new 
elements if it’s only a 
small change. 


Popular 
design 
systems 


Google’s Material 


Design system 
material.io/design/ 
Google created a very well put 


together design system called 
Material, which is full to the 
brim with great information. 


IBM Carbon 


design system 
carbondesignsystem.com/ 
Carbon is the design system 


for IBM Cloud products. It isa 
series of individual styles, 
components, and guidelines 
used for creating unified Ul. 


MailChimp grid system 
ux.mailchimp.com/patterns/ 
If you're looking for a more 


web-focused design system, 
MailChimp offers a perfect 
insight in to all the elements 
you need to get started on 
your own. 


Apple Human 

Interface Guidelines 
apple.co/2HY5vtf 

A very complex but thorough 
example of a design system 
across multiple devices. 


Lonely Planet 
bit.ly/2KAqmbq 
If you're looking for a detailed 


colour and icon design 
system, check out Lonely 
Planet’s design elements. 


GitLab Design System 
design.gitlab.com/ 
An open-source design 


guideline for web apps, which 
covers everything from their 
iconography, through to the 
use of popup windows. 


Design workflow 


CREATE A PAGE DESIGN 


By using the wireframes and design system as a guide, 
you can piece together a well-planned page design 


Consistency transforms a good 
design into a great design, and 
following the wireframe and 
design system ensures that the 
look, feel and user experience of 
the product isn’t compromised. 


Visual hierarchy 

A strong visual hierarchy ensures 
clarity in any user-centric design. 
To get started, design the most 
universal components — such as 
colour and typography — first, and 
then work down to smaller ones 
such as buttons and input 
components. To insert just about 
anything into your design, hover 
over to Insert tab at the top of the 
Sketch UI, click, and then start 
importing elements onto your 
artboards. Keep in mind your 
wireframe and design system to 
ensure consistency in your work. 


Colour 

Colour is arguably the most 

important element in any design 

workflow. With colour, we can set 

the overall look, feel and tone of a 

design, so always ensure you use it 

in correlation to the importance of 
the elements that they are 
assigned to. Try grouping your 
colours like so: 

e Primary colours: the main brand 
colours, used to create the basic 
color scheme of a project and 
crucial elements like buttons. 


e Secondary colours: these 
accompany the primary colours, 
and compromise different 
shades, gradients and tints from 
the primary colours. 

e Tertiary colours: an important 
group, which display system 
messages, such as alerts, 
warnings, and notifications. 

To make your colours as efficient 

as possible, create each colour as 

a symbol in your Sketch file to 

ensure any changes update the 

elements across your design. 


Typography 

It’s important to design the style 
and size of all the headings (H1, H2, 
H3, and so on) and paragraphs to 
create a visual hierarchy. Usually, 
typography doesn't have many 
stylistic variations, such as colour 
or weight, so consider using your 
colours effectively to present the 
brand personality. Once your 
happy, define your text styles in 
the right-hand panel, by clicking 
on the ‘no text style’ dropdown 
and selecting ‘new text style’, 
once saved, you can use this 
typographic style throughout 
your design, like symbols! 


Icons 

When used effectively, icons 
add context to more complex 
components such as buttons, 
labels, or tables. Icons in your 


design can be functional by 
encouraging users to interact 
— using an ‘X’ in a button to signify 
a ‘Remove’ action, for example. 
Consider creating a set of UI 
icons as nested Sketch symbols to 
help complement other Ul 
elements in the design framework, 
— arrows, for example — that can 
be used in sliders, previous and 
next buttons and pagination. 


Buttons and inputs 

When designing buttons and 
inputs, make sure to design their 
individual ‘states’. Each have 
multiple states and provide visual 
feedback to users to indicate the 
current state (for example, hover, 
clicked). It’s good practice to 
create each state as a separate 
symbol, since this adds flexibility. 


Complex components 

and Sections 

At this stage, the design could be 
considered complete since it has 
everything needed to create a 
functioning product. However, it’s 
worthwhile spending more time 
creating components for the UI 
framework, such as cards, tables 
and forms. 

These can then be combined to 
develop sections, shaping the 
blocks to which our websites and 
applications rely on such as 
headers, navigations and banners. 
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Finest Way to Eat Sugar 


Plant of Eggs 


9:41AM 


| Scream, You Scream 


Sign up for free 


EXPORT A DESIGN TO ZEPLIN 


Export your designs into something that developers can finally work with 


If you're looking to bridge to gap 
between design and development, 
look no further than Zeplin, a 
program that turns a Sketch file 
into something that all developers 
can work with. If you haven't 
already downloaded Zeplin as an 
app or signed up online (it’s free!) 
and are working in a team of 
developers, go and do it! 

Zeplin pulls out fonts, line 
heights, CSS, colours, symbols, 
images and many more, allowing 
them to be previewed through 
their web app. This is essential for 
presenting your concept to the 


development team, as everyone 
can keep track of the look and feel 
when inevitable changes happen 
in the development cycle. 

Once you're signed up, go ahead 
and install it to your plugins. To 
push selected artboards to Zeplin, 
highlight them, click the plugins 
tab, then Zeplin, and finally export 
selected artboards. Zeplin will ask 
you to name your project, do so 
accordingly, hit next, and your 
artboards will be available to view 
once you've invited your team! 

It’s worth pointing out that 
Zeplin will convert everything in 


your Sketch file, so organisation is 
key! Stay on top of your folder 
structures, colours, variables and 
keep your assets as efficient as 
possible (with symbols of course!) 
to make sure your development 
team has no excuses when 
building your favourite elements. 

If working on multiple projects, 
consider downloading the Zeplin 
app compared to the web app. 
Both are great, but the desktop 
app makes life so much easier 
when switching between Sketch 
and Zeplin in a fast-paced working 
environment. 


8 killer plugins to use with Sketch 


Plant 
plantapp.io 
Want to add version control to 
Sketch? Plant is the best. Push 
your changes directly from 
Sketch to a version-controlled 
file on the cloud for free. 


Version control for 
designers 


Bootstrap grid 
bit.ly/2KHDNWK 
Depending on your dev 


setup, getting a grid system 

guideline is essential for any 
web project. Bootstrap is a 
great plugin to get going. 


CC) Ferns unincas Explor Marketplace Pricing 
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Icon font 
bit.ly/1FNn2wO 
A simple way to add icons into a 
project in one place. Download 
and install your favourite icons 
and easily insert them into your 
design with a few clicks. 


Getting a 
team set 
up on Zeplin 


When you’ve got your designs 
ready to share, download and 
install Zeplin as a Sketch 
plugin, and push your 
artboards to the web app. 

Get your team to head over 

to app.zeplin.io/register and 
sign up for a free account to 
get started. Once everyone 
has signed up, open your 
project in Zeplin, and click on 
the Invite button in the 
Members tab on the right, 
send out the emails and 
youre sorted... it’s that simple! 
If your colleagues aren't so 
keen, show them the 
generated CSS and they 

will quickly get onboard! 


Zeplin will convert 

everything in your 

Sketch file, so 

organisation Is 
key 


Lightwire 
lightwireplugin.com 
If you're looking to build an app 


wireframe, this plugin has a 
collection of popular pages 
ready for you to download and 
use for free! It’s a lifesaver. 


Lightning fast wireframing in Sketch 
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Blog - Article design 


Far far away, behind the word 


mountains, far from the 
countries Vokalia and 
Consonantia, there live the 


blind texts. 


h Writ \ 219px 
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123 4567 va 


Far far away, behind the word 
mountains, far from the 
countries Vokalia and 
Consonantia, there live the blind 
texts. Separated they live in 
Bookmarksgrove right at the 
coast of the Semantics, a large 
language ocean. Far far away, 


Alex Lee, Nov 12th, 
91px 445px 
219px 25px 
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HOW TO USE ZEPLIN 


Take advantage of Zeplin’s features to help organise projects and take hours off your development time 


Exportable CSS 

By far the most valuable feature in 
Zeplin is the ability to view the 
designs as code. To get started, 
highlight a specific area such as 
the banner in Zeplin and look to 
your right, where you should be 
presented with some CSS. 

It will definitely save hours on 
development time in the long run! 
It’s fair to say the code isn't as 
clean as it could be, but it’s a 


fantastic starting point for any dev. 


Creating a style guide 
You may have noticed in Zeplina 


Craft 
invisionapp.com/craft 
Craft is a plugin which includes 
features, such as duplicating 
content, pulling live content 


from URLs, and of course 
syncing to Invision prototypes. 


switch at the top for Dashboard 
and ‘Styleguide’. If you haven't 
already, click on the 'Styleguide'’ 
option. With any luck, Zeplin has 
worked out all your assets and 
compiled a pre-made style guide 
for you to hand over to your 
developers, including any fonts 
and colours. 

If you want to keep on top of 


and colours independently by 


over the font or colour in the 
right-hand panel, and clicking on 


Paddy 
bit.ly/20xRbQv 
Simple yet effective, Paddy is a 


quick keyboard shortcut to 
adding padding to your 
elements and its children, like 
buttons, text blocks and more. 


the style guide, you can add fonts 


selecting them in Zeplin, hovering 


the droplet or ‘Aa’ icon to add them 


to your colour palette or font book. 
This is handily compiled into the 
CSS block on the right, ready for 
you to export! 


Tags 

If you find your project has a fair 
amount of artboards to review 
then tags is the way forward. It’s 
useful tagging your artboards in 
the dashboard area (top left) by 
highlighting an artboard and 
hitting Cmd+T. By setting up tags, 
you can switch between different 
categories to improve the 
organisation of your project. 


Content generator 
bit.ly/imLVrXp 
Add more life to your designs 


with randomly generated 
pictures and text, such as user 
profile pictures, names and 
biographies, all in a few clicks. 
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Design workflow 


To keep on top of 
the style guide, 
you can add fonts 
and colours 
independently 


Comments & Feedback 
If you're keen to get feedback on 
your design, the ‘notes’ feature in 
Zeplin is very useful. Open up an 
artboard, and click the ‘+’ icon next 
to notes in the bottom right corner 
and select somewhere on the 
design. Having the option to be 
specific on where you click is great 
for pointing out intricate details. 
(You can turn the notes on and off 
by clicking the monkey emoji next 
to the + icon. ) 

You can also keep your team 
updated by syncing your Zeplin 
project to Slack via the dashboard. 


Magic Mirror 
magicsketch.io/mirror 
If you want to present your 


mockups in 3D, Magic Mirror can 

transform your flat design onto 

a collection of devices to give it 
that realistic edge. 
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A NEW 
GUNVERSATION 


THE COGNITIVE CHATBOT REVOLUTION 


We look at the applications for intelligent chatbots, 
the considerations developers should have when 
building them and the benefits for everyone 


. 


WHY DEVELOPERS NEED 10 EMBRACE CHATBOT TOOLS 


FROM END-USERS TO DEVELOPERS, INTELLIGENT CHATBOTS CAN MAKE LIFE ALOT EASIER 


oO one really likes the 

traditional line-of-business 

applications - neither the 

end-users nor the 
developers. The reason behind 
that is called ‘fixed screens’. Think 
about how you do simple things 
like booking a meeting within a 
traditional fixed-screen application 
today - you have to input the 
names of all attendees, choose a 
room, select start and end time, 
etc. ASk yourself how natural it 
feels to go through all these steps? 
Probably the interaction with the 
computer isn’t very natural 
because the UI defines its flow and 
it feels like a compromised user 
experience that we are all now 
used to. At the same time, 
developers have to spend a lot of 
time building every single one of 
those ‘fixed screens’ and then 
update them to reflect the 


another human. If you look at 
science fiction, the desire for 
computers that resembles a 
human has always been popular, 
and now we are seeing the first 
bits in action. Everything from 
booking a flight to receiving 
banking advice is achievable 
through the use of intelligent 
chatbots, with the cognitive 
element offering a far more 
sophisticated level of personalised 
advice to the consumer. For 
businesses deploying chatbots, 
the increased interaction with 
consumers will give them more 
data and therefore insights into 
their behaviour. We are already 
seeing a lot of businesses building 
bots for channels like Viber and 
Facebook Messenger. At the same 
time a lot more chatbots are 
expected to be built into their own 
web, desktop and mobile 


“When you look at how cognitive chatbots function, the 
concept of a screen disappears, allowing you fo 
re-efine the Ul to follow the natural conversation 
rather the other way around” 


constantly changing business 
requirements. Intelligent chatbots 
are changing that. 

The increased availability of 
data and cognitive machine 
learning capabilities are enabling 
the intelligent chatbots to bring 
the interaction between humans 
and computers to a whole new 
level that hasn’t been possible 
before. Now we can interact with 
computers in a close-to-human 
way that enables the UI to follow 
the conversation. 

So what does this mean in 
reality for developers and 
end-users? 

For consumers, they are going 
to see a far more enjoyable, 
seamless and natural interaction 
with chatbots. Rather than having 
to ask exact questions or follow a 
fixed path, they will be able to 
speak naturally and jump around 
with their requests in much the 
Same way they would if talking to 


applications in order to improve 
the employees’ performance and 
the customer experience. 

For developers, the benefits of 
cognitive chatbots are great. The 
availability of out-of-the-box tools, 
such as Progress’ NativeChat 
(www.progress.com/nativechat) 
and Telerik and Kendo UI 
Conversational Ul components 
(www.telerik.com) means that it’s 
never been easier for developers 
to start building cognitive chatbot 
applications capable of being 
deployed at scale. If you look at 
how applications are built today, 
especially from the front-end, you 
have to build a series of windows 
with different properties. But, 
when you look at how cognitive 
chatbots function, the concept of a 
screen disappears, allowing you to 
re-define the Ul to follow the 
natural conversation rather the 
other way around. Another benefit 
for developers is using them to 


automate some of their own 
processes. Cognitive chatbots 
offer a means to automate a 
number of processes of the 
application development lifecycle 
and integrate them with the team’s 
Slack channel for example. 

The rise of cognitive chatbots is 
inevitable. What’s most exciting is 
that as more companies introduce 
them, allowing them to gain and 
access more and more data, the 
smarter and more helpful they will 
become. Developers will not be 
required to constantly update as 
they will in many ways update 
themselves, learning at their own 
rate. At the same time, developers 
would need to work on the UI far 
less because the UI will be almost 
auto-generated based on the flow 
of the conversation, allowing for 
more time to address the next 
business problems. 

Get on board before the 
chatbots start to build themselves! 
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A NEW CONVERSATION 


WHAT DO YOU THINK ARE 

THE KEY BENEFITS THAT 
GHATBOTS BRING T0 
BUSINESS APPLICATIONS? 


WHAT ARE THE 
ACGESSIBILITY ISSUES 
THAT CONVERSATIONAL UI 
GREATES FOR DESIGNERS AND 
DEVELOPERS? 
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=a 
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HOW MUCH MORE 
ADVANCED DO YOU 
THINK CHATBOTS WILL 
BE IN 5 YEARS? 
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Build a feedback 
app with React 


Combine React’s powerful state management with 
real-time messaging to make a flexible feedback tool 
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DOWNLOAD TUTORIAL FILES 


tutorial vy www-Jfilesilo.co.uk/webdesigner 


pplications on the web are 
commonplace nowadays. Developing 
these constant communication systems 
can be tricky using traditional methods. 
REST APIs are a solution, but frequent requests to the 
server can slow things down and can end up being a 


poor experience for the user. 


WebSockets are a step up from regular HT TP requests. 


They allow real-time communication between a 
server and a browser. Any update from either side will 
instantly notify the other without the overhead of a 
regular HT TP request. 

React is, in its nature, a dynamic framework. By 
updating an application's state, we can change how it 
behaves. That information can come from any source - 
including WebSockets. By passing data from a socket into 
React’s state, communication between clients can 
become instantaneous. 

In this tutorial, we will be making a retrospective 
feedback tool similar to that used at the end of projects in 
large organisations. Users on multiple devices can 
provide good or bad responses and have others vote on 
which ones they agree with. Traditionally this would be 
done in-person using sticky notes, but our tool will allow 
remote workers to participate from around the world. 

We will be making the WebSocket server with Nodejs 
and Yarn. Make sure these are both installed and up to 
date before we begin. 


1. Install dependencies 

This application has two sides - the server and the client. 
The Node server uses the ‘ws’ package to start and 
manage WebSocket connections, while ‘create-reactapp’ 
powers the client side. 

Locate the project files on the command line and 
install the dependencies. Once that is finished, start up 
the React development server. 
> yarn install 

> yarn start 


2. Start a WebSocket server 


The ‘ws package provides everything needed to get a 
server running within Node. Before we go any further, we 
need to get the server up and running. 

Head to server/index.js and initialise the server. Then 
open up anew command line window and run this file in 
it. We will need to re-run this command every time a 
change is made to the server in order to reload tt. 

/x server/index.js */ 

const server = new 
WebSocket.Server({ port: 8082 }); 

/x Separate command line */ 

> yarn run server 


3. Link React to connection 
On the client side, all the communication happens within 
a special ‘WebSocketConnection’ object we will make. 
This lives outside of React, but we pass a callback into it 
that will let React know when any messages are received. 
Open up src/Appjs and create a new connection. Do 
this inside ‘componentDidMount(’, which allows React to 
render the app initially without having to wait for the 


connection to set up 
componentDidMount() { 
this.connection = new 
WebSocketConnection(this.onMessage) ; 


I 


4. Connect object to server 

When we initialise “WebSocketConnection, it will connect 
to and manage the WebSocket on React’s behalf. When 
any information arrives that React would need, it’s passed 
to the callback from the previous step. 

In src/WebSocketConnectionjs, start the WebSocket in 
the constructor and hook into the ‘message’ event. This 
will be useful later on. 

constructor (messageCallback) { 

let pathToServer = 
CONSTANTS .WEBSOCKET_URI ; 
this.connection = 
new WebSocket (pathToServer) ; 
this.connection.onmessage = 
this.onMessage.bind(this) ; 
this.messageCallback = 
messageCallback; 


J 


5. Identifying a client 
While we can identify each client on the server, if the 
user refreshes the page or loses connection they will 
appear as a new client. To keep track of a user, the 
server can supply a generated ID to pass through on 
connection if they have one. Just after creating the 
‘oathToServer variable, add the ID as a query parameter if 
one is available. 

const existingId = getId(); 

if (existinglId) { 

pathToServer += *‘?id=${existingId}* ; 
} 


6. Detecting a message 

All communication is performed through messages. 
When the server sends messages to the client, it will call 
the ‘onMessage’ method inside ‘WebSocketConnection. 
Messages are limited to a handful of formats, but one of 
those is a string. We can convert objects to JSON strings 
and pass those across instead. 

Create the ‘onMessage’ method. For now, all it needs to 
do is convert the string back to an object and pass it 
through to React’s callback from earlier. 

onMessage(event) { 
const data = JSON.parse(event.data) ; 
if (this.messageCallback) { 
this.messageCallback (data) ; 
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7. Detect a server connection 

Once a client has tried to connect, the server should 
acknowledge it. The one we set up in step 2 receives a 
‘connection’ event when that happens. Back in server/ 
index.js, underneath the initialisation of the server, add a 
listener for the connection event. We will take the ID 
passed as a query parameter and pass it to another 


Developer tutorials 


function that sets up the client. 
server .on(“connection” , 
(client, req) => { 
const { 
query: { id } 
} = url.parse(req.url, true); 
addClient(client, id); 
i; 


8. Set up a client 
Every client is tracked by the ‘ws’ module and is 
represented by an object. We can add the ID to that 
object to link a user to it. If the user did not supply an ID, 
we can generate one and send it over. Once that is set up, 
add a listener for when that client sends a message. 
As you can see from the code below, add the following to 
the ‘addClient’ function. 
function addClient(client, connectionId) { 
const id = connectionId ? connectionId : 
uuid() ; 
client.id = id; 
client.on(“message”, onClientMessage) ; 
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Or O) Elements Network Console Performance Sources Application » : xX 
@® 9S & Y Vew. = = 
| Filter Hide data URLs 

All XHR JS CSS Img Media Font Doc \\> Manifest Other 


Group by frame Preserve log ) Disable cache Offline q 
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|_| localhost © All v Enter regex, for example: (web)?socket 


websoc... | Data .. Time 
+{"action":"INITIAL_STATE","payload":{"id":"b1f76e8c-39ec-4dce-9809-a3eafd6750... 96 17:... 
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feedback: [] 
id: "b1f76e8c-39ec—4dce-9809-a3eafd6750db" 


2/7 request... 


Above: Chrome’s developer tools are great for working 
with WebSockets. We can see the connection being made 
and messages being sent around in real time 


9. Pass initial state 
Once the client has been set up, we can start sending 
information back again. The first of that would be initial 
State, which contains any feedback already entered along 
with the client ID and a username that we will set up later. 
Add this command to the end of addClient, which will 
send over the initial state. The object we pass has an 
‘action to describe the intent with a ‘payload’ providing 
the data. 
client.send( 
JSON. stringify({ 
action: CONSTANTS. INITIAL_STATE, 
payload: { 
id, username: users[id], 
feedback: feedback.map(f => ({ 


Use local IP address 


When testing the site on another device, be sure 


’ 


to use the local IP address rather than ‘localhost 
in any client-side code. In this project, this can 
be updated in src/constants.js. 
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Filter output 


Debug 


Persist Logs 3 items hidden by filters Reset filters | 


CSS XHR_ Requests 


WebSocketConnection. js:13 


message { target: WebSocket, isTrusted: true, data: "{\"action 


\":\"INITIAL_STATE\", \"payload\": {\"id 


\"i\"dc93db41-7060—45d3-9fa6-9elc3bcf6c75\",\"feedback\": []}}", origin: 


"ws://localhost:8080", lastEventId: "", 


ports: Restricted, eventPhase: Q, 


bubbles: false, cancelable: false, defaultPrevented: false, .. } 


Above: |n other browsers without WebSocket inspection, log the event inside onMessage within 


WebSocketConnection.js to check messages as they arrive. 


...f, username: usersLf.clientId] 


t)) 


update the state, or in this case initialise it. Open up src/ 
App.js and fill out the ‘onMessage ’ callback function here. 
Add the following to the switch statement in place, which 
we will add to in later steps. 

case CONSTANTS. INITIAL_STATE: 


12. Submit a username 
Now we see a screen asking for a username. While our 
generated ID identifies a client, it should be linked to a 
human-readable name to identify the user. 
The <UsernamePrompt/> component is hooked up to 
submit using the ‘setUsername’ method in src/Appjs. 
Capture that username and send it through the 
WebSocket. 
this.setState({ 
username 
3 
this.connection. send( 
CONSTANTS. SET_USERNAME , 
username) ; 


13. Send data via WebSocket 


While adding a username removes the prompt, it does 
not yet send it to the server. We need to hook up the 


‘send’ method in ‘WebSocketConnection first. 
Open up src/WebSocketConnection,js again, find the 
‘send’ method and hook it up. All it will do is convert it to a 


this. setState({ 
ready: true, 


10. Save the ID from initial state 


Now the server is responding, we should capture the data id: data.payload.id, 


it sends. The first thing to get is the client ID, which is username: data.payload.username, JSON string in the expected format. 
passed in through with the initial state. We can do this feedback: data.payload. feedback send(action, payload) { 
step outside of React to keep things simple. ye this.connection. send( 

In src/WebSocketConnnection js, just after we parse the break; JSON. stringify({ 


JSON in ‘onMessage’ check to see if the message is the 
initial state. If it is, store the ID for use later on. 
if (data.action === 
CONSTANTS. INITIAL_STATE) { 
setId(data.payload.id); 
} 


11. Update React state 


The ‘onMessage’ function will run ‘messageCallback’ from 
React once a message is received. We can use this to 


Set a username to start adding feedback 


Username 


Hot reloading pages 


The ‘create-react-app’ package uses WebSockets to 
reload the page once the code changes. This will 
appear as a request from ‘websocket’ and should 


not be confused with our server. 


IR 
mom: 


Search (text or /regex/) 


Elements Network Console React » : xX 


Highlight Updates Highlight Search 


Enter Feedback Add 


Vv <Loading> 
<div className="loading">Loading...</div> 
</Loading> 


</App> 
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1) 
Loadin = 
Right eee Props 
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State 


state is received. This removes the <Loading/> 


feedback: Array[@] 
component and shows the page 


id: "72db12ff-e178-480c-a8ce-496f0387 39d" 
ready: false 

Top 

The feedback input fields will only be visible once 

a username is present in the state - either by 

adding it from the prompt or set by initial state 


/Users/matt/Desktop/tutorial/working-copy/src/index. js 
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WebSockets work? 


WebSockets are a relative newcomer 
to browsers, but they work off HTTP - 
the same principle that browsers have 
used for years. 

Each WebSocket connection starts 
as aregular HTTP request to the 
server. A special ‘Upgrade’ header 
tells the server it would rather use 
WebSockets to communicate. If the 
server accepts, it sends back its own 
‘Upgrade’ header telling both parties 
to use a WebSocket instead. This is 
known as the handshake phase. 

From then on, both the browser 
and the server can start sending 
messages in simple formats such 
strings. This all comes without the 
overhead of headers and cookies that 
accompany regular HTTP requests. 
The connection stays open for as 
long as either party is connected. The 
result is real-time communication with 


action, 
payload 
3) 
oF 
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14. Link username to ID 
The final step in setting a username is to save it against an 
ID on the server. This needs to be kept separate from the 
client so we can link them back if the connection closes. 
In server/index.js add a case to the switch statement in 
‘onClientMessage. Be sure to trim the username so it 
avoids breaking the layout of other users. 
case CONSTANTS. SET_USERNAME : 

users[this.id] = trim(data.payload, 

CONSTANTS .MAX_USERNAME_LENGTH) ; 
break; 


15. Submit feedback 


With a username set, we can start sending feedback. The 
process is similar to setting a username, but we won't set 
any state as we submit. 

Open up src/Appjs and add the functionality for the 
‘submitFeedback’ function. This will use the same ‘send’ 
method as before, but the payload will be an object telling 
the server if it is good or bad feedback. 

submitFeedback(type, content) { 
this.connection.send( 
CONSTANTS.ADD_FEEDBACK, { 
type, 
content 
} 
Je 
} 


16. Save feedback server-side 
With the feedback submitted, we need to pick up that 
message server-side. [hese are stored as objects ina 
separate feedback array on the server. Head back to 
server/index.js and add another case in 


‘addClientMessage. If the feedback object is created with 
no issues, push it to the array 
case CONSTANTS.ADD_FEEDBACK: 
const feedbackObj = 
createFeedbackObject ( 
this.id, data.payload.type, 
data.payload. content 
2; 
if (feedbackObj) { 
feedback. push(feedback0Obj) ; 
} 


break; 


17. Broadcast to all clients 

If we refresh the page, we will see our feedback showing 
up, but it should show up instantaneously. We need to tell 
everyone that feedback has been added. 

Use the ‘broadcast function in server/index,js to send 
the feedback object, plus the username linked to the ID, 
to all connected clients. All this function does is loop 
through the connected clients and sends the same 


low latency. 


message to each of them. 
broadcast (CONSTANTS.FEEDBACK_ADDED, { 
...feedbackObj, 
username: usersLfeedbackObj.clientId] 


ps; 


18. Receive feedback client-side 
Once the feedback has been broadcast, we should add it 
to the local state of each connected client - including the 
one that sent it. 

In src/Appjs, update the ‘onMessage’ function to 
accept the new feedback. We will use the soread operator 
to copy the existing array, rather than mutate it directly. 

case CONSTANTS.FEEDBACK_ADDED: 
this.setState(prevState => ({ 
feedback: [ 
...prevState. feedback, data.payload 


Enter Feedback 


Matt 


This is some example feedback 0 


Voted 


Above: The vote button next to each piece of feedback will be 


disabled if the user has already voted for it, or it was submitted by them 
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) socket.io Home Demos’ Getstarted Docs Blog Donate Slack 36 ] €) Star 41,878 Download v2.1.0 


SOCKET.IO 2.0 IS HERE 


FEATURING THE FASTEST AND MOST RELIABLE REAL-TIME ENGINE 


eee ~/Projects/tweets/index,js eee https://your-node-app.com 


var io = require('socket.io')(8@); Tweets about socket.io and javascript 


var cfg = require('./config.json'); 
var tw = require('node-tweet-stream')(cfg); o RT @bugsnag: Learn the ins and outs of #JavaScri... now 
tw.track('socket.io'); 


; ; RT @designhorf: Int ti rticle about Google J... now 
tw.track(' javascript"); © @designhorf: Interesting article about Google J now 


tw.onC'tweet', function(tweet){ 


7 Hacks for ES6 Developers #javascript https://t..... now 
io.emitC'tweet', tweet); B Pp J pt https:// 


3); 


Alternative 

real-time tools 

While WebSockets are well 
supported in modern browsers, 
they will not work in lE9 and 
Opera Mini and can be hard to 
scale up to lots of users. While 
providing support for these 
cases may be tricky, there 

are some tools that can make 
things easier. 

Socket.lO provides real-time 
communication between 
devices - primarily through 
WebSockets but with fallback 
options like long polling. 

They provide both server and 
client APIs to enable easy 
communication. This is 

done through channels, 


*%% Javascript: 4 Books In 1: Beginner's Guide + Tips .... now 
; which can send messages to 
specific clients. 

SockJS is a similar platform 
that caters for different server 
environments, ie Python and 

* slack Erlang. It creates an abstraction 
over WebSockets to make 
4 Siva tacks yoni enn ised honk plach: Sindh: Wonka vie henwans: communication easier. Both are 
set up to work with thousands 
of clients with ease. To help 
Vv work with WebSockets, it makes 
sense to use an external tool to 
help the project scale. 
19. Add a vote 21. Sync votes on the client this.setState(prevState => { 
When one user submits feedback, another user can vote Finally, the votes should be kept up to date on all clients. const newFeedback = 
on it to give it prominence. This can be done by clicking Once the message is broadcast, we can update each L...prevState. feedback]; 
the vote number next to each feedback item. client's state by finding the feedback and updating the newFeedbackLindex] = { 
Like with the username and feedback submission, send a votes array within it. Add the following to ‘onMessage’ ...newFeedback[index], 
message to the server when a vote has been cast. within src/Appjs. votes: data.payload.votes 
submitVote(id) { case CONSTANTS. VOTE_ADDED: }; 
this.connection. send( const index = this.state. feedback return { feedback: newFeedback }; 
CONSTANTS.ADD_VOTE, id); . findIndex( ioe 
} f => f.id === data.payload.id); } 
if (index !== -1) { break; 
20. Record the vote 
We still need to record the vote on the server side. To do 
that, we need to find the object in the feedback array, «) 
check the user hasnt voted on it already and add their 
vole Iney havent Enter Feedback Add 
Once that is done, we can broadcast that change to all 
clients. In server/index.js, add another case to 
onClientMessage to add the vote. This is really popular feedback! & 3 
case CONSTANTS. ADD_VOTE: Matt Vote? 
const votedOn = feedback. find( 
f => f.id === data.payload) ; 
if (votedOn) { This is quite popular feedback 2 
if (!votedOn. votes. includes( | Matt Vote? 
this.id)) { 
votedOn. votes. push(this. id) ; 
broadcast (CONSTANTS. VOTE_ADDED, { Above: Ae ie This is slightly popular feedback 1 
id votedn. id ae wo 
votes: votedOn.votes GacadiGuthe number 
}; of votes it has. This 
} makes sure the most | Nobody has voted for this feedback 0 
} popular feedback Matt Vote? 
gets noticed 
break; 
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tutorial 


n this article we're going to show you how to 
deploy your single-page application (SPA) toa 
cloud-hosting platform, such as Google Cloud 


deploying to Google App Engine and deploying to 
Firebase Hosting, both of which are based on Google 
Cloud infrastructure, but provide different offerings — 
we will come to this later. 

Your SPA could be built using React, Vuejs, Angular or 
even something bespoke — it doesn't really matter, the 
process is the same. For this tutorial we'll use Angular’s 
CLI tool to create a very simple app so we actually have 
something with routing to deploy, then we'll set up a 
simple Node js server and finally deploy the whole thing 
to GCP. To do this you will need a Google account to 
access Google Cloud Platform (GCP). With this you get 
$300 free credit for a year. 

All code is available via GitHub: github.com/ 


danielcrisp/deploy-your-spa-to-google-cloud or FileSilo. 


1. Install Angular CLI 


First we need to install Angular’s CLI tool. This is super 
simple and requires at least Node v8.9.0 and nom v5.5.1. 
We can install it globally like this: 
| npm install -g @angular/cli 
Once the install is complete we can go ahead and create 
our app. We're going to call the app ‘gcp-demo’ so we 
need to run this command to scaffold the app with a 
routing module: 
| ng new gcp-demo --routing 
When the process completes you can check everything 
is OK by starting the app: 

cd gcp-demo 
| ng serve 
Open up http://localhost:4200 and you should see your 
basic app. 


2. Add Bootstrap 


Just to keep life simple we're going to add Bootstrap to 
provide our basic styling requirements. Head over to 
getbootstrap.com/ and copy the CDN link for the CSS 
from the Get Started section. 

Open up ‘src/index.html’ and paste it at the bottom of 
the ‘<head>’ element. Done. 

We dont need the JS, but if you do want to add 
interactivity to Bootstrap components in an Angular app 
we'd recommend ng-bootstrap (ng-bootstrap.github. 
io/) rather than using Bootstrap’s own JS. 


3. Set up some routes 
In order to demonstrate one of the hosting requirements 
of a SPA (more on this later) we need to create some 
routes in our app. Again, we can use the CLI to do the 
legwork for us. 

We used the --routing’ flag when we created the app 
SO we already have a routing module set up for us. Let’s 


create a couple of components that we can use as routes. 


Tip: We'd recommend stopping the dev server before 
creating new components. 

As anod to the World Cup, let’s call the first one 
‘route-one. And as a nod to, erm, the first route let’s call 
the second one ‘route-two’. Create them like this: 


Platform (GCP). We'll show two different options; 


ng g component route-one 
ng g component route-two 


4. Wire them up into the router 
Open up ‘src/app/app-routing.module.ts’ in your editor of 
choice. The CLI has kindly already imported our new 
components into the main ‘app.module.ts, but we'll still 
need to import them into this file manually. 
import { RouteOneComponent } from ‘./ 
route-one/route-one. component’ ; 
import { RouteTwoComponent } from ‘./ 
route-two/route-two. component’ ; 
You will see the following array definition: 
| const routes: Routes = []; 
We need to create two simple route configurations inside 
this array as follows: 
const routes: Routes = [{ 


path: ‘one’, 

component: RouteOneComponent 
t, 

path: ‘two’, 

component: RouteTwoComponent 
+15 


This just tells Angular that if the URL path matches /one’ 
then render the RouteOneComponent and if it matches 
/two’ then render the RoutelwoComponert. 


5. Add a navigation 
The routes are set up, but we can't actually get to them 
yet. Run ‘ng serve’ again and you'll see that nothing has 
visibly changed. 

Open up ‘app.component.html in your editor and then 


delete everything apart from the <router-outlet> element. 


This is the component that will render your routed 
components. Anything outside of here will be visible 
on all routes. 
Now let’s add a navigation just above ‘<router-outlet>’ 
and wrap the whole thing in a container, like so: 
<div class=”container-fluid’> 
<nav class=’navbar navbar-expand navbar- 
light bg-light mb-3”> 
<a routerLink=”/” class=’navbar-brand”>GCP 
Demo</a> 
<div class=”navbar-nav”> 
<a routerLink=”/” 
routerLinkActive="active” class=”’nav-item 
nav-Link’”>Home</a> 
<a routerLink=”/one” 
routerLinkActive=”"active” class=”’nav-item 
nav-link”>One</a> 
<a routerLink=”/two” 
routerLinkActive="active” class=”’nav-item 
nav-link”>Two</a> 
</div> 
</nav> 
<router-outlet></router-outlet> 
</div> 
Save the changes and your app should update with a 
nice shiny nav. Click on the links and the URL will change 
and text will appear in the page for routes one and two. 
Home doesn't have any text yet because nothing has 
been routed here. 
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6. Deployment decisions 
Now we've got our ready-to-deploy app we need to make 
a choice; shall we host on Firebase or Google App Engine 
(GAE)? The key difference is that — at least for this 
example — Firebase does a lot of the work for you, 
including providing a production server with HT TP2 
Support, pushing out to a global CDN and managing your 
(free) SSL certificate. GAE, on the other hand, expects you 
to do all of this legwork yourself. 

Sounds like Firebase wins hands-down. But there is a 
price to pay for all of this magic, and that is, well, the price. 

Firebase does offer a generous free tier but if you need 
to go big, or if you want to get your hands dirty with the 
nitty-gritty and be in total control, then GAE is a great 
alternative option. 

We're going to take a look at GAE first, and then switch 
over to Firebase. 


7. Google App Engine 

As we mentioned Firebase provides you with a 
production server, but Google App Engine doesnt. So this 
is probably a good place to start. GAE supports Java, 
Ruby, C#, Go, Python, PHP and Node js, but as we're all 
familiar with JavaScript were going to use Nodejs. 

Before we write any code we first need to figure out 
where to put this server. It needs to be in the project repo 
and be able to serve the compiled app files. If you run a 
production build with ‘ng build --prod’ you'll see that the 
compiled files are output to ‘dist/gcp-demo.. This is pretty 
handy as it means we can create our server inside ‘dist’ 

First, though, we need to modify “gitignore’ so that the 
git only ignores the build. Open up ‘gitignore’ and on line 
A change /dist’ to /dist/gcp-demo.’. Also remove the 
leading slash from /node_modules’ Save it and commit it. 
Next, create an empty index,s file inside /dist’. 


8. Install some packages 
Now, thankfully, there are some great ‘nom packages out 
there that will do most of the hard work for us. 

First, open up your terminal, cd into the ‘dist’ directory, 
run the following command and follow the prompts: 
| npm init 
This just creates a ‘packagejson file in your directory 
ready for you to install some packages. Let’s co just that: 
npm install express serve-static 

compression helmet --save 

This will install four separate ‘nom’ packages, which 
well now configure. 


9. Express 
Express will be our server. It’s hugely popular and very 
Simple to use. Open up your ‘index,js file and add this: 
const express = require( ‘express’ ); 
const app = express(); 
// Check if the host env has specified a 
port to run on 
const port = process.env.PORT || 3000; 
app.listen(port, () => console.log(*App 
listening on port ${port}*)); 
You should now be able to start this server from your 
terminal using ‘node index.js. Nothing much will happen 
but you should see the message logged to your console. 
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10. Serve the static files ay 


C @ localhost 


The next step is to serve the compiled files as static files. GE Omnb. Hone Ones Te [R GJ] Elements Console Sources Network Performance + Memory» _ 
Express supports lots of clever things like routing, but we @® 8S m& ¥Y Q_sView: = = O Groupbytrame Preserve log ) Disable cache Offline ¢ 
only need a very simple, lightweight server here, so Filter Hide data URLs 
import the ‘serve-static package at the top of your file. —) xHR Js CSS Img Media Font Doc WS Manifest Other 
7 2 2 50 100 150 200 
I const serveStatic = require(‘serve-static’); | it T a oat 
———  _:S———~CS«;7; 
Then just before the port declaration, enter the following 
piece of code: 
app. use(serveStatic( dirname + ‘ /gcp- Name Status Protocol Type Initiator Size Time Waterfall A 
demo’)): “| localhost 200 13KB  10ms 
| )); pty OK http/1.1 docu... Other an8B nee I 
This tells your Express app to serve the contents of =) bootstrap.min.ss 46 stot sys, pecan | Hae 
‘gcp-demo statically. = stackpath.bootstrapcdn... OK ale YES Parser 138KB 139ms a 
If you run a production build with ‘ng build --prod’ and css| Styles.34c57ab7888ec!... oe http/11 | etyies... —_ ies = ms! is 
aw rser ms 
Start your server again you should be able to access your =) runtime 26ste2edca6e6... 200 htoytt seme 8 11KB 25m 
app at http://localhost:3000. =] OK Parser 1.0KB  17ms 
-| polyfills.2f4a59095805... 200 ; (index) 19.8KB 36ms 
11 S e in th e in d ex 3) OK REEUEY [GNA Parser 58.2KB 17ms t 
‘ rving =] main 7a820bdaH4ca00.. 200 ny serine (index) 63.2KB 42ms 
Click around in your app and you should see that your = OK Parser 237KB 27ms 


routing is working nicely. You can access Route One and 
Route Two, and the URL in the browser's address bar 
Should update accordingly. 

There is one gotcha, though, that it is important to be 
aware of with single-page applications of any flavour, e.g. 
React, Angular. The routing is managed client-side using 
the HTML5 History API, which makes it look like you are 
navigating to different pages. However, if you request a 
client-side route from the server the server doesn't know 
anything about it and will return a 404. 

We can demonstrate that now by going to Route Two 
at /two’ and then refreshing the page. You should see the 
default Express error page showing ‘Cannot GET /two’ 

That’s because Express doesn't Know anything about 
a route or directory called /two’ The solution to this 
problem is remarkably simple. We simply tell the Express 
app to serve the ‘index.html file for all paths, other than 


Get the app 


Amazon Web Services are probably still the market 


leader for cloud computing but Google have made 
a concerted effort to catch up. Particularly 
impressive is the Google Cloud Console app. 


existing files. We do that like this: 

app.use(‘*’, (req, res) => { 

res.sendFile(__dirname + ‘/gcp-demo/ 

index.html’); 

oe 
Add this just after the ‘serveStatic line — the ordering is 
very important. By putting this line after the static files we 
ensure that if the request is for a file that actually exists — 
‘styles.css, for example — then the static handler will 
intercept the request first and serve the requested file. 
The request will never reach the *’ (wildcard) route 
handler. Anything that doesn't match an existing file will 
be handled by the catch-all wildcard route. 


12. Adding compression 

By default Express wont compress your files, however it 
is very simple to enable this and you get some great 
results. Even for such a simple app the compiled 
JavaScript is pretty huge, despite all the minification and 
tree-shaking that goes on with a production build. Our 


‘mainjs is a weighty 237 KB! Gone are the days when 
we'd aim for less than 100 KB. 

If you open up the Network panel in Devlools and 
Switch to the ‘large request rows view you will see that 
the two sizes listed for each of our app’s files are either 
similar or identical. Bootstrap, however, has two very 
different numbers. The number at the top, in black, is the 
size of the file sent over-the-wire — the response size — 
and the number below in grey is the size of the file on disk 
— the content size. 

Let's enable compression and see what effect it has. 
Currently the total size is showing 319 KB. 

Open up your server's ‘indexjs again and import the 
compression package. 

const compression = require( ‘compression’ ); 
Then before the serveStatic line add this: 
app.use(compression()) ; 

That's it! Restart your server and refresh. Now the 
‘mains file is just 63 KB — a saving of over /O per cent! 
The entire app is coming in at just 1O9 KB, almost a third 


Right 

After creating your new project 
on Google App Engine this is 
what you should see 


Welcome to App Engine 


A powerful platform to build web and mobile apps that scale automatically Learn more 


Your first app 


earn how to 


ee : 
cnane W l 


Select a language 


& App Engine Docs 


— Browse docs 


— Download Google App Engine SDK 


Learn more about App Engine's 
capabilities and features, and download 
the App Engine SDK to set up your local 
environment 
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of what it was before — perhaps we could get it to under 
100 KB after all. 

Now, GAE does actually do this for you automatically, 
but it’s such an impressive improvement for such a simple 
thing that we thought it was worth demonstrating. 


13. One last package 

The last thing we like to do is add some basic protections 
to help secure your app. There is a great package called 
Helmet, which we've already installed, that adds 12 
different middleware functions to Express that set various 
headers. Out of the box only seven are enabled, but you 
can configure it further to suit your needs. Again we 
need to import the package: 

H const helmet = require(‘helmet’); 

And then add it to Express, before the compression: 

HE app.use(helmet()); 

Restart the server and refresh. Open up the Network 
panel and check the Response Headers for an app file. 
You'll see the defaults, such as ‘X-XSS-Protection’, and you 
may also notice that the ‘X-Powered-By: Express’ header 
has disappeared. 

As the website says, it’s not a silver bullet, but it helps. 
We'd definitely recommend spending some time to learn 
about and set up the Content Security Policy. 


14. A little npm trick 


Currently we have two ‘package json files; one for the 
Angular app, and one for the production server. This 
means we have to run ‘nom install twice. But there is a 
neat little trick we can do with nom to save us that 
additional step. 


Deploying to the cloud 
Back in the old days, a ‘traditional’ 
hosting company charged around 
£40 per month for your own VPS. It 
could be used to host various client 
projects ranging from WordPress 
installs to simple, one-page static 
sites. But rarely did it ever get even 
close to be being used to its full 
potential. Ultimately, it was more 
hassle than it was worth; a user had 
to maintain the VM, update the OS, 
fix vulnerabilities and generally 
do all the things that were hard to 
understand and didn’t want to do — 
and pay more for the privilege! 

An alternative is to start hosting 
a portfolio or project on AWS. It’s a 
lightweight, static site so it should 
be quick anyway, but on AWS it is 
blazing fast. Plus AWS’s CloudFront 
distributes to edge locations so 
it is fast globally. There’s no need 
to maintain anything or monitor 
uptime — there are leagues of 
experts to do that for you 24/7. And 
the best bit is this only costs about 
£1.50 per month. 

Deploying to the cloud is 
definitely the way forward. 
You only pay for what you use. 
Scaling is easy. Someone else is 
responsible for keeping it online. 
And you get access to global, 
cutting-edge infrastructure. 


In your terminal ensure youre at the app root where 
the Angular ‘packagejson’ is. Then we can install the 
production server as a dependency of the Angular 
app, like this: 

u npm install ./dist --save 
Now when we run ‘nom install’ at the root it'll also install 
the server's dependencies. Neat. 


15. Cloud Console 


Now it’s time to login to the Google Cloud Console at 
console.cloud.google.com. If you've not already created 
an account now is the time to do so. Once youre in click 
on New Project and give your project a name. 

Once it is ready, click on App Engine in the menu and 
you should see the Welcome page. 

Then click on ‘Select a language in the blue box and 
choose Nodes, which will start a step-by-step wizard to 
Walk you through the process. At the Region step choose 
‘europe-west2’ — this is the London datacentre. 

Once the billing has been enabled, Google Cloud will 
offer you a tutorial — we're going to skip this option for 
now, though. 


16. Prepare for deployment 
So we've got our production server and we have a project 
in the cloud waiting for us to deploy something. 

We just need to complete a few more steps so that 
were deployment ready. 

First, we need to add a little configuration file for GAE. 
Create a file call app.yaml’ in the ‘dist’ directory and add 
this to tell GAE to use Node js v8: 
| runtime: nodejs8 


Next, we need to add a couple of things to the ‘package. 
json in our ‘dist’ directory. In the ‘scripts object’ we are 
going to add two things: 
“start”: “node index.js”, 

“deploy”: “gcloud app deploy” 

These are like aliases that we can run from nom, so 
now ‘nom start’ will run ‘node index.js and ‘nom run 
deploy’ will tell the Google Cloud SDK to deploy our app. 

And finally we need to make sure we've got a 
production build ready by running ‘ng build --prod’. 

Before we go any further, search for Google Cloud SDK 
and follow the instructions to download and install the 
command-line tool. Initialize the SDK and then login 
from the prompt. 


17. Let’s deploy 

OK, go ahead... from your ‘dist’ directory run this and 
follow the prompts: 

mg Npm run deploy 

This will Zip up your files, upload them to the server, 
unzip them and then start the relevant services. You can 
run it multiple times and it will only upload modified files. 

Once the upload has completed you should be able to 
run ‘gcloud app browse’ and your freshly deployed app 
will be opened in your browser. 

Take a look at the Network panel in DevTools, right-click 
on the column headings and enable the Protocol column. 
You'll see our files are served using ‘h2’ (HT TP/2) and 
‘https’ without requiring any complicated configuration 
from us. 

So that wasn't too bad, was it? But how does it 
compare to Firebase? 
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Developer tutorials 


Deploy your SPA to Google Cloud 


Features 


netlify 


Pricing Docs 


Blog Q 


Log in 


Build, deploy, and manage 
modern web projects 


Get an all-in-one workflow that combines global deployment, 


continuous integration, and HTTPS. And that’s just the beginning. 


Get started for free 


Connect your repository 


Add your build settings 


Deploy your site in seconds* 


Deploy your website 


Sign up — 


Cloud providers 
This tutorial only covers 
Google Cloud Platform 
and Firebase, but there 
are plenty of other great 
options out there. 

AWS, Google Cloud 
Platform and Azure are the 
big players and offer all 
sorts of complicated and 
wonderful things, however 
the learning curve can be 
pretty steep. 

Because of this there 
are anumber of other 
providers that utilise the 
big player’s infrastructure 
but provide their own 
abstraction for particular 
purposes that greatly 
simplifies the developer’s 
job. Firebase does this by 
providing a super-easy 
deployment process to 
GCP. Heroku does a similar 
thing for AWS. Netlify — the 
new kid on the block — sits 
on top of (at least) GCP, 
AWS and Rackspace Cloud 
to minimise downtime. 
The compromise of this 
simplicity is usually the cost. 


18. Firebase 


Firebase has its own console over at console.firebase. 
google.com. Log in (or sign up if you havent already) and 
click on the Add project button. 

Give the project a name, choose your region and click 
on ‘Create project. It'll take a few moments to provision. 


~ 
= Adda project 


— ———— 
== i Database 
19. Install the tools 


Once it is ready continue to the ‘Get started’ page and 
scroll down to the Hosting box. Click the ‘Get started’ 
button. You should see a prompt instructing you to install 
the ‘firebase-tools package with nom. Do that. 

Once it is installed ensure you are in the root of your 
project and run the following command to login: 
| firebase login 
Now you need to run the ‘init command to add the 
configuration files for Firebase: 
| firebase init 
At the first prompt select Hosting. If you are prompted to 
select your Firebase project, choose the one you've just 
created. Next you'll be asked about your Hosting Setup. 
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For your public directory you need to enter ‘dist/ 
gcp-demo as this is where your compiled project resides. 

At the next prompt it'll ask you if you want to configure 
as asingle-page app. Enter ‘Yes here. You'll then probably 
be asked if the existing ‘index.html should be overwritten, 
in which case enter ‘No’ 

All done. This has simply created two files in your 
project that configure Firebase. 


20. Time to deploy 

Now were ready to hit the deploy button. To co that, 
simply run the following: 

| firebase deploy 

As with Google App Engine, this will upload all of your files 
and manage the process for you. Once it has completed 


you'll be shown your app’s URL — open it in your browser 
to check that everything is OK. 


21. That’s all there is to it 


Clearly Firebase simplifies the process but the result is 
pretty much the same. Once you've done the legwork of 
creating your own production server the deployment 
process of GAE is just as simple as Firebase’s. Some 
(unscientific) performance analysis — AKA refreshing 
repeatedly — shows both hosts load in the same kind of 
time, but perhaps Firebase’s global CDN would help if we 
were not in the app’s region. Although maybe GAE has 
this, too — were not really sure. 

Either way the choice is up to you, and what is right for 
your project. 


Daniels-MBP:gcp-demo danielcrisp$ firebase init 


You're about to initialize a Firebase project in this directory: 


/Users/danielcrisp/Projects/gcp-demo 


Which Firebase CLI features do you want to setup for this folder? Press Space 
to select features, then Enter to confirm your choices. 
Database: Deploy Firebase Realtime Database Rules 
OFirestore: Deploy rules and create indexes for Firestore 
© Functions: Configure and deploy Cloud Functions 
Hosting: Configure and deploy Firebase Hosting sites 
O Storage: Deploy Cloud Storage security rules 
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Featured host: Netcetera 


netcetera.co.uk 
03330 439780 


About us 


Formed in 1996, Netcetera is one of 
Europe's leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 
- Managed hosting - A full 
range of solutions for a cost- 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust & support 
Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100 per cent 
uptime, multiple internet routes with 
the ability to handle DDOS attacks, 
ensuring your site doesn't go down 
when you need it. 


2.Secure and dependable 
Netcetera prides itself on offering its 
clients a secure environment. 

It is accredited with ISO 27001 for 
security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


Netcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
on the IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well as a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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To advertise here contact Chris 


chris.mitchell@futurenet.com 
+44 (0)1225 687832 
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data centre colocation, cloud 
hosting, dedicated servers 
and managed web hosting 
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One of the greenest and most efficient 
Datacentrés in the UK. 
#ZeroCarbonDatacentre 


Learn More 


Netcetera Hosting 


Our Services 


Testimonials 

Roy T 

“ have always had great service from Netcetera. Their technical support is 
second to none. My issues have always been resolved very quickly. 


Suzy B 

“We have several servers from Netcetera and their network connectivity is 
top-notch, with great uptime and speed is never an issue. Tech support is 
knowledgeable and quick in replying. We would highly recommend Netcetera. 


Steve B 

“We put several racks into Netcetera, basically a complete corporate backend. 
They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and nothing was too much 
trouble, so they matched our requirements 100 per cent.” 


Supreme hosting 


OCWCS bees Sees, 
MANAGED HOSTING 

Cwcs.co.uk 

08001777000 

CWCS Managed Hosting is the UK’s 
leading hosting specialist. They offer a 
fully comprehensive range of hosting 
products, services and support. Their 
highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience 
and are passionate about what they do. 


- Colocation hosting 


- VPS 
- 100 per cent network uptime 


Uk-based hosting 


<¢¢ CYBERHOST 


cyberhostpro.com 

0845 5279 345 

Cyber Host Pro are committed to 
providing the best cloud server 
hosting in the UK; they are obsessed 
with automation. If you're looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


¢- Cloud VPS servers 
- Reseller hosting 
- Dedicated servers 


Cluster web hosting 


fasthosts 


fasthosts.co.uk 

0808 1686 777 

UK-based and operating 24/7 from 
dedicated UK data centres. Fasthosts 
keep over one million domains running 
smoothly and safely each day. Services 
can be self-managed through the 
Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
« Hosted email 


Budget hosting 


HE TZMNER 


ONLINE 


hetzner.com 

+49 (0)9831505-O0 

Hetzner Online is a professional web 
hosting provider and experienced data 
centre operator. Since 1997, the company 
has provided private and business clients 


All-inclusive hosting 


land1.co.uk 

0333 336 5509 

1&1 Internet is a leading hosting 
provider that enables businesses, 
developers and IT pros to succeed 
online. Established in 1988, 1&1 now 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position nationally and internationally. 


- Dedicated/shared hosting 
¢« Colocation racks 
- SSL certificates 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 


SSD web hosting 


<>bargainhost 


bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database, which includes 
many repeat customers. They have also 
won several awards for providing an 
outstanding hosting service. 


- Shared hosting 
- Cloud servers 
« Domain names 


Value Linux hosting 


PATCHMAN 
WEB HOSTING 


patchman-hosting.co.uk 
01642 424 237 

Linux hosting is a great solution for 
home users, business users and web 
designers looking for cost-effective and 
powerful hosting. Whether you are 
building a single-page portfolio, or you 
are running a database-driven 
eCommerce website, there is a Linux 
hosting solution for you. 


- Student hosting deals 
- Site designer 
- Domain names 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
by email and with a ticketing system. 


- Cloud servers with any OS 
- Linux OS containers 
- 24/7 expert support 
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Featured: 


ORTH Northcoders 
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Facebook: Northcoders 


Northcoders is the coding bootcamp full-time bootcamp, or fit their course 


for the north, based in the heart of around your life with their 24-week 
Manchester and built upon northern part-time bootcamp. Their internal 
values of grit, determination and career support team will help find you 
community spirit. No matter what work as a developer, setting up 

your background, you can fast-track interviews with your choices of 

your career and become a web or Northcoders Hiring Partners across 


software developer in 12 weeks at their the north of England. 


e Full-time: e Part-time: 
Fast-track your Career Fit our Curriculum around 
in just 12 weeks. your life in 24 weeks. 

1. Get started with coding for you, set aside a few evenings 

The best way to know if coding each week to really start making 

is for you is to just try it! We progress! If coding is for you, 

recommend the free, online this should be fun. 

JavaScript track of 

Codecademy to get you 4.Be prepared 

Started with the basics. We'll be with you every step of 
the way when you apply. Make 

2.Do your research Sure you go through all the 

Make sure you read plenty materials we recommend and 

of student reviews to make ask for help if youre stuck. 

sure youre applying 

somewhere reputable. Read 5. Get social 

their blog and have a look at With Northcoders, youre not 

their social channels. just on a course, youre part of a 
community that will stay with 

3. Throw yourself in you long after you graduate. 


Once you've decided it’s right Make the most of it! 


Becoming part of this vibrant, caring community was 
something | hadn't expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 

Joanne Imlay 

Primary school teacher to software developer at Careicon 
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Become a software 
developer in just 
12 weeks 


<Learn to code - in just 12 weeks /> 
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Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable, future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 


udemy 


UDEMY 


udemy.com 


Twitter:@udemy 


Facebook: udemy 


The inspiration for Udemy beganina 
small village in Turkey, where founder 
Eren Bali grew up frustrated by the 
limitations of being taught ina 
one-room school house. Realising Swe 
the potential of learning on the internet, os pak suns Deereeees 
he set out to make quality education ) | 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 
JavaScript and web development. 


40,000+ courses: There isa 
course for every designer and dev. 
Self-paced learning: Learn how 
to code at your own pace. 


THE 
IRON YARD 


theironyard.com 


Twitter.@ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 


largest and fastest-growing in-person 3 =. 
code schools. It offers full-time and Weer ee! 
parttime programs in backend rae ‘ 


engineering, frontend engineering, 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
change for people, their companies 
and communities through technology 
education. The in-person, immersive 
format of The Iron Yard’s 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros. 
Free crash courses: One-night 3 
courses, the perfect way to learn. 


THE BLACK FRIDAY 


°°. BINGE LEARN 


Get your learning lineup ready. 
#BingeLearn with $13 courses today. 
Prices increase every other day. 
ALE ENDS 11:59 PM PST ON 11/25 


WEGOT CODERS 


‘2 WE GOT CODERS 


wegotcoders.com 
hello@wegotcoders.com 

We Got Coders is a consultancy that 
provides experts in agile web 
development, working with startups, 
agencies and government. Take one of 
their 12-week training courses that covers 
all that is required to become a web 
developer, with highly marketable 
full-stack web development skills. 


- Classroom-based training 
- Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


futurelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 
courses, from Language & Culture to 
Business & Management; Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 
quizzes and discussions. 


- Learn from experts 


- Free courses 
- All-device access 


GYMNASIUM 


GYMNASIUM 


thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses, 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


« Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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Free with 
your magazine 


Essential assets Exclusive Tutorial Plus, all of this 
and resources video tutorials project files Is yours too... 
Get textures, fonts, Learn to code/create with All the assets you'll need .Ali:new tutonainilestoheyveu 


and JavaScript techniques 

* Two more chapters from the 
Beginners JavaScript video 
series from Killersites 
(shop.killervideostore.com) 

* 121 Duotone PS filters and 12 
Simple business card mockups 
from Sparklestock 
(www.sparklestock.com) 


backgrounds and more HTML, CSS, JS & PHP to follow our tutorials master this issue’s HTML, CSS 


To Log in to www-filesilo.co.uk/webdesigner 


Register to get instant access 
to this pack of must-have 
creative resources, how-to 
videos and tutorial assets 
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The home of great 
downloads — exclusive to 
your favourite magazines 
from Future! 


8 Secure and safe online 
access, from anywhere 


8 Free access for every 
reader, print and digital 
©, Download only the files 
@ you want, when you want 


8 All your gifts, from all your 
issues, in one place 


Everything you need to 
know about accessing 
your FileSilo account 


Register 
Please fill out 


m below. 


Follow the instructions 


on screen to create an 


account with our secure FileSilo Subscribe today & Tlal(eve.4 the free 


system. Log in and unlock the 
al a Z 
mendes gifts from more than 50 issues 


NXONWNS 


ee = Over 60 hours More than Over 250 
oe etl of video guides 400tutorials creative assets 


You can access FileSilo 
on any computer, tablet 
or smartphone device using any 
popular browser. However, we 
recommend that you use a 
computer to download content, DEVELOPMENT 
as you may not be able to 
download files to other devices. 


Designing the animation test environment 


Head to page 32 to subscribe now 


If you have any 


problems with (a) Already a print subscriber? + 
accessing content on FileSilo, (3) More 
takea look at the FAQs online Unlock the entire Web Designer FileSilo library with your added 
or email our team at the unique Web ID — the ten-digit alphanumeric code printed eve 
address below. above your address details on the mailing label of your issue 


filesilohelp@futurenet.com subscription copies — also found on any renewal letters. 


NEXT MONTH 
JAVASCRIPT 


What’s now? 
What’s next? 


Get a closer look at the best new ES8&8 techniques, plus 
the latest and greatest JS libraries and frameworks 


In the third part of the series learn how to 
add textures and materials to objects 


CODE VISUAL - GET STARTED WITH : SAY HELLO 
MOTION DESIGN © THREEJS— PTS: a TO FLUTTER _ 
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Learn how to create contemporary dynamic 


Cesign, realised through the power of WebGL : and how tostart creating for iOS and Android 


Visit the WEB DESIGNER online shop at EASES ROE ay >. GI 
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>> PUT A PAUSE 
IN YOUR DAY 


With so many demands from work, home and family, 
there never seem to be enough hours in the day for you. 
Why not press pause once in a while, curl up with your 
favourite magazine and put alittle oasis of ‘you’ in your day. 


OX 


PRESS PAUSE 


ENJOY A MAGAZINE MOMENT 


To find out more about Press Pause, visit; 


pauseyourday.co.uk 


ies This is the moment 
when a click 


turns into a lead. 


PRESS AHEAD 


WP Engines digital experience platform drives your business forward faster. wpengine.co.uk WP CNQ Ine’ 


